如何讓彼此相鄰的2組輸入，但只有1引導標籤

我想知道如何得到2個輸入組彼此相鄰，但只有1個標籤上面的輸入組...有點像這個如何讓彼此相鄰的2組輸入，但只有1引導標籤

到目前爲止我有：

<div class="row"> 
       <div class="form-group col-xs-3 col-xs-offset-1"> 
        <label for="attendeeCountMin">Guests</label> 
        <input id="attendeeCountMin" class="form-control input-group-lg" type="number" name="attendeeCountMin" placeholder="Min"/> 
       </div> 

       <div class="form-group col-xs-3"> 
        <label for="attendeeCountMax"></label> 
        <input id="attendeeCountMax" class="form-control input-group-lg" type="number" name="attendeeCountMax" placeholder="Max"/> 
       </div> 
</div>

它會不斷製造第二輸入框中輸入第一個上方一點點，除非我把東西在第二個標籤框。有人知道怎麼做嗎？

感謝

來源

2017-03-18 jeremy

您可以通過添加一對夫婦的CSS規則得到你想要的結果。

.form-group { 
    display: inline-block; 
}

上述CSS規則可以確保包含.FORM組類的每一個元素與其它元素位置內嵌

.form-group label { 
    display: block; 
}

確保下.FORM組類的標籤上不會受上面的規則。

你可以在這裏看到的jsfiddle：https://jsfiddle.net/NikolaosG/r80fjLwt/

來源

2017-03-18 17:44:01

移動的行

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<label>Guests</label> 
 
<div class="row form-group"> 
 
       <div class="form-group col-xs-3 col-xs-offset-1"> 
 
        
 
        <input id="attendeeCountMin" class="form-control input-group-lg" type="number" name="attendeeCountMin" placeholder="Min"/> 
 
       </div> 
 

 
       <div class="form-group col-xs-3"> 
 
        <input id="attendeeCountMax" class="form-control input-group-lg" type="number" name="attendeeCountMax" placeholder="Max"/> 
 
       </div> 
 
</div>

外的標籤

來源

2017-03-18 17:45:55 megamit

如何讓彼此相鄰的2組輸入，但只有1引導標籤

回答

相關問題