底部對齊按鈕引導程序

-1

是否有幫助器類，我可以使用底部對齊下面的「搜索」按鈕。我正在使用Boostrap 3.2。底部對齊按鈕引導程序

<div class="input-group col-md-2"> 
    <label for="FirstName">First Name</label> 
    <input class="form-control" id="FirstName" maxlength="10" name="FirstName" placeholder="First Name" type="text" value="" /> 
</div> 
<div class="input-group col-md-2"> 
    <label for="LastName">Last Name</label> 
    <input class="form-control" id="LastName" maxlength="10" name="LastName" placeholder="Last Name" type="text" value="" /> 
</div> 
<div class="input-group col-md-2"> 
    <label for="RecordNo">Record No</label> 
    <input class="form-control" id="RecordNo" maxlength="6" name="RecordNo" placeholder="Record No" type="text" value="" /> 
</div> 

<div class="input-group col-md-3"> 
    <label for="Department">Department</label> 
    <select id="Department" class="form-control"> 
    <option value="">CHOOSE DEPARTMENT</option> 
    </select> 
</div> 
<div class="col-md-3 input-group"> 
    <button id="Search" class="btn btn btn-success pull-right"> 
    Search &nbsp;<span class="glyphicon glyphicon-search"></span> 
    </button> 
</div>

enter image description here

來源

2014-11-21 Sam

你能發佈的jsfiddle，好嗎？ – 2014-11-21 03:25:16

你可以給一個JSFiddle嗎？我想你正在尋找'display：inline'，或'div.inline {float：left; }' – 2014-11-21 03:35:02

你沒有按照它的意圖使用'.input-group'。 [「通過在任何基於文本的''之前，之後或者兩側添加文本或按鈕來擴展表單控件。使用帶有.input-group-addon的.input-group預先添加或附加元素一個'.form-control'。「]（http://getbootstrap.com/components/#input-groups）你最好的辦法可能是設置包含行的'font-size：0'，然後重置每一列的' font-size「添加到你的'@ font-size-base'，然後將每列設置爲'float：none;顯示：inline-block; vertical-align：bottom;'。 – cfx 2014-11-21 04:01:00

.col-lg-4, .col-lg-8  
{ 

float:none; 
display:inline-block; 
vertical-align:middle; 
margin-right:-4px; 
}

或使用本

 .vcenter { 
    display: inline-block; 
    vertical-align: middle; 
    float: none; 
      }

來源

2014-11-21 03:39:19 Dhaval

負邊距不好，最好設置該行的'font-size：0;'，然後重置列內的字體大小。 – cfx 2014-11-21 04:02:19

底部對齊按鈕引導程序

回答

相關問題