如何防止表單控件在Bootstrap中占用新行

Question

我正在嘗試將下拉菜單顯示在文本“Pay every”旁邊。 如何在不編輯css或為其提供新的自定義類的情況下使用引導類來執行此操作？

<div class="form-group">
    <label class="col-sm-2 control-label">Offer:</label>
    <div class="col-sm-2"><input type="text" class="form-control" placeholder="$1000"></div>
    <div class="form-group">
        <div class="i-checks col-sm-1">
            <label class="control-label"> <input type="radio" value="option1" name="a" checked> All at once </label>
        </div>

        <div class="i-checks col-sm-2">
            <label class="control-label"> <input type="radio" value="option1" name="a"> Pay every </label>
            <select class="form-control" name="every" disabled >
                <option>2 weeks</option>
                <option>1 months</option>
                <option>2 months</option>
                <option>3 months</option>
                <option>6 months</option>
            </select>
        </div>

    </div>
</div>

Answer 1

form-inline類是用於使用內聯控件創建表單的引導類。 每個form-group所有內容都form-group內嵌方式顯示。

<div class="form-inline">
    <div class="form-group">
        <label class="control-label">Offer:</label>
        <input type="text" class="form-control" placeholder="$1000">
    </div>
    <div class="form-group">
        <div class="i-checks">
            <label class="control-label"> 
            <input type="radio" value="option1" name="a" checked> All at once </label>
        </div>
    </div>
    <div class="form-group">
        <div class="i-checks">
            <label class="control-label"> <input type="radio" value="option1" name="a"> Pay every </label>
            <select class="form-control" name="every" disabled >
                <option>2 weeks</option>
                <option>1 months</option>
                <option>2 months</option>
                <option>3 months</option>
                <option>6 months</option>
            </select>
       </div>
    </div>
</div>

您可以在這里看到它的外觀： http ： //www.bootply.com/WXOIcKQN6y

Answer 2

簡單地把它放在一個新的col？

<div class="row">
<div class="col-sm-4 form-group">
    <label class="control-label">Offer:</label>
    <input type="text" class="form-control" placeholder="$1000">
</div>
<div class="col-sm-4 form-group">
    <div class="i-checks">
        <label class="control-label"> 
        <input type="radio" value="option1" name="a" checked> All at once </label>
    </div>
</div>
<div class="col-sm-4 form-group">
    <div class="i-checks">
        <label class="control-label"> <input type="radio" value="option1" name="a"> Pay every </label>
        <select class="form-control" name="every" disabled >
            <option>2 weeks</option>
            <option>1 months</option>
            <option>2 months</option>
            <option>3 months</option>
            <option>6 months</option>
        </select>
   </div>
</div>