Bootstrap选择框和按钮水平对齐问题

时间:2015-11-10 17:45:51

标签: html css twitter-bootstrap

我只想让我的选择框填充列,并在最后有一个按钮。

这就是我的意思:

enter image description here

我已经尝试了很多方法来做到这一点但是我现在拥有的是:

<div class="col-md-6>
<form class="form-inline">
    <div>
        <select class="form-control" id="select">
             <option selected="true" style="display:none;">Select an Option</option>
             <option>1</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
        </select>
        <span style="float:right"><button type="submit" class="btn btn-default">Okay</button></span></div></form></div>

1 个答案:

答案 0 :(得分:3)

灵活方案的直接解决方案。

此解决方案没有将您的跨度向右浮动。

.form-inline div{display: flex;}
select{flex: 1;}
<div class="col-md-6"> <!-- Make sure to close the class name -->
<form class="form-inline">
<div>
<select class="form-control" id="select">
	 <option selected="true" style="display:none;">Select an Option</option>
	 <option>1</option>
	 <option>2</option>
	 <option>3</option>
	 <option>4</option>
</select>
<span style="float:right"><button type="submit" class="btn btn-default">Okay</button></span></div></form></div>