twitter-bootstrap 如何使用 Bootstrap 并排放置两个选择?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/25228284/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 21:18:29  来源:igfitidea点击:

How to place two selects side by side using Bootstrap?

csstwitter-bootstraptwitter-bootstrap-3

提问by Xubayer pantho

I want to place two select options side by side in my form. I am using Bootstrap 3 but I can't place them with proper alignment.

我想在表单中并排放置两个选择选项。我正在使用 Bootstrap 3,但我无法正确对齐它们。

Here is my HTML code:

这是我的 HTML 代码:

    <form role="form">
        <div class="form-group">
            <div class="input-group date" id="datetimepicker1">
                <input type="text" class="form-control"/>
                <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <input type="text" class="form-control"/>
                <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
            </div>
        </div>
        <div class="form-group">
            <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </div>
        <div class="form-group">
            <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </div>
        <button type="submit" class="btn btn-primary btn-block te" >Prices &amp; Availability</button>
    </form>

回答by Harsh

Use this

用这个

jsfiddle http://jsfiddle.net/harshdand/e0fc1ucq/

jsfiddle http://jsfiddle.net/harshdand/e0fc1ucq/

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
            <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </div>
    </div>
</div>

回答by user2251695

class form-control in bootstrap has the display value of block. give it the class d-inline-block

bootstrap中的form-control类的显示值为block。给它类 d-inline-block

 <select class="form-control d-inline-block">