html - Bootstrap 3 在标题内创建内联选择

Question

我想实现这样的目标: ，我试图让它工作几个小时但做不到，这是我的代码:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
    <div class="row">
        <div class="col-mid-offset-1 col-lg-offset-1 col-mid-5 col-lg-5">
            <div class="form-group">
                <div class="row">
                    <div class="col-xs-7">
                        <h5>Land Area</h5></div>
                    <div class="col-xs-3">
                        <select class="form-control" id="mainSearch-unitSelect">
                            <option>1</option>
                            <option>2</option>
                        </select>
                    </div>
                    <div class="col-xs-2">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

有什么建议可以让它发挥作用吗？

Answer 1

试试这个:

https://jsfiddle.net/2bz3jpad/2/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
    <div class="row">
        <div class="col-mid-offset-1 col-lg-offset-1 col-mid-5 col-lg-5">
            <div class="form-group">
                <div class="row">
                    <div class="col-xs-6 text-right">
                    <h5><strong>Land Area:</strong></h5></div>
                    <div class="col-xs-3 text-left">
                        <select class="form-control" id="mainSearch-unitSelect">
                            <option>1</option>
                            <option>2</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>