如何在bootstrap的同一行上獲得控件和圖標？

我使用引導程序的網格系統進行頁面佈局。在其中一列中，我想在同一列中並排顯示input控制和字體超棒圖標。但是我無法正確地對齊圖標。它總是低於控制。如何在bootstrap的同一行上獲得控件和圖標？

有人可以幫我嗎？

2016-11-09 LP13

問題是您不使用引導的表單類正確。 Bootstrap使您能夠使用基於表單的類和字體真棒類來專門設計。您可以使用以下html和引導類來實現此目的。

HTML：

<div class="row"> 
    <div class="col-md-6"> 
     <div class="input-group"> 
      <input name="FirstName" class="form-control" id="FirstName" type="text"> 
      <span class="input-group-addon"> 
       <i class="fa fa-minus-circle" aria-hidden="true"></i> 
      </span> 
     </div> 
    </div> 
</div>

CSS：

.input-group-addon { 
    cursor: pointer; 
    color: red; 
}

如果你想刪除的背景和毗鄰該連接的圖標，輸入，則只需改變.input-group-addon { CSS類以下。

.input-group-addon { 
    cursor: pointer; 
    color: red; 
    border-radius: 4px; 
    border: 0px; 
    background-color: transparent; 
}

樣品：http://codepen.io/Nasir_T/pen/VmvBXV

來源

2016-11-09 20:36:54

float:left是你在這裏找的。只需將它應用於輸入和圖標的類，並設置輸入的寬度，使其不佔用整個屏幕的寬度。

.mt-remove { 
    cursor: pointer; 
    color: red; 
    float: left; 
} 
.mt-remove:before { 
    font-family: 'FontAwesome'; 
    content: "\f056"; 
    font-size: 12px; 
} 
#FirstName { 
    width: 200px; 
    float: left; 
}

在mt-remove類添加line-height可能會幫你還，如果你覺得它有用。

來源

2016-11-09 20:24:06 Sam07

網格系統基於12列布局。您目前在一個6欄內有兩個元素。

嘗試兩個6列，而不是：

<div class="row"> 
<div class="col-md-6">input</div> 
<div class="col-md-6">icon</div> 
</div>

來源

2016-11-09 20:30:15 James

這將definitly對準兩個並排的，但我不知道這是OP想要的東西。這看起來像是單個輸入控件的兩個部分，所以它們應該可能在同一列中。只是我的兩分錢。 – Sam07

再次查看問題時，您可能是對的。（那麼，至少它給了另一個答案） - – James

是的。儘管你對「col-md-6」專欄有一個明確的定義，它應該是'col-md-12' – Sam07

如何在bootstrap的同一行上獲得控件和圖標？

回答

相關問題