Question

我想将所有控件和另外一个按钮放在同一行。请帮我这样做，因为我是新手。

<div class="row">
    <div class="col-sm-8">
        <div class="dropdown col-sm-3" name="DropDownList" style="display:inline-block">
            <button class="btn btn-primary dropdown-toggle" id="dropdownButton" type="button" data-toggle="dropdown" style="min-width:100px;text-align:left;">
                Select Class
                <span class="caret" style="margin-left:60%"></span>
            </button>
            <ul class="dropdown-menu">              
                <li><a href="#" data-value="1">1st item</a></li>
                <li><a href="#" data-value="2">2nd item</a></li>
                <li><a href="#" data-value="3">3rd item</a></li>
                <li><a href="#" data-value="4">4th item</a></li>
                <li><a href="#" data-value="5">5th item</a></li>
                <li><a href="#" data-value="6">6th item</a></li>
                <li><a href="#" data-value="7">7th item</a></li>                    
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3" style="display:inline-block">
            <label for="attendanceDate" style="display:inline-block"> Date:</label>
            <div class="input-group">
                <input type="text" name="atDate" id="atDate" readonly="readonly" class="form-control clsDatePicker">
                <span class="input-group-addon"><i id="ico" class="glyphicon glyphicon-th"></i></span>
            </div>
        </div>
    </div>
</div>

Answer 1

显示：内联块是您可以用来实现此目的的东西。只需创建一个css类：

.inline-element{
   display:inline-block;
}

然后将其应用于您希望彼此旁边显示的控件。

<div id="container">
    <button class="inline-element"> </button>
    <button class="inline-element"> </button>
</div>

您还可以单独为每个元素指定样式。

<div id="container">
    <button style="display:inline-block;"> </button>
    <button style="display:inline-block;"> </button>
</div>

有关不同类型显示的更多信息，请参阅以下文档：CSS display property

我想使用bootstrap在同一行中放置多个控件

1 个答案: