2017-04-17 75 views
0

是否可以在引導?bootstrap標籤和輸入大小:sm大小下兩行,sm大小一行,一個固定witdh

我實現了兩行標籤和輸入。

<div class="form-group"> 
    <label for="example">LABEL<span style="color:red">*</span></label> 
    <input id="example" class="form-control" type="text"/> 
</div> 

但是我想在顯示寬度超過sm尺寸時使它們成爲一行。 所以,我編輯我的代碼如下。

<div class="form-group"> 
    <div class="col-md-2"> 
    <label for="example">LABEL<span style="color:red">*</span></label> 
    </div> 
    <div class="col-md-10"> 
    <input id="example" class="form-control" type="text"/> 
    </div> 
</div> 

它看起來很好,除了一些保證金問題。 但我也希望標籤的寬度尺寸是固定的,這樣只有輸入寬度的尺寸對於右側纔是靈活的。

可能嗎?提前致謝。

回答

0

嘗試使用形式水平形式的內聯類引導的

<form class="form-horizontal"> 
    <div class="form-group"> 
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
    <div class="col-sm-10"> 
     <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
    </div> 
    </div> 
</form> 
0

請將此代碼:

label { 
    width: auto; 
    display: inline-block; 
} 
#example { 
    width: auto; 
    display: inline-block; 
    margin-left: 15px; 
} 
<div class="form-group"> 
    <label for="example">LABEL<span style="color:red">*</span></label> 
    <input id="example" class="form-control" type="text"/> 
</div> 

我希望這是對你有幫助。

謝謝