gpt4 book ai didi

html - twitter bootstrap select 覆盖了它的一些标签

转载 作者:太空宇宙 更新时间:2023-11-04 03:20:44 25 4
gpt4 key购买 nike

我的代码:

<div class="form-inline">
<div class="form-group">
<label class="control-label col-sm-2" for="demo">Options: </label>
<div class="col-sm-8">
<select class="form-control" name="demo">
<option value="all">View All</option>
</select>
</div>
</div>
</div>

演示:

http://jsfiddle.net/Wy22s/408/

问题是下拉菜单部分覆盖了“选项:”标签。解决此问题的最佳方法是什么?

最佳答案

我会像这样使用 Bootstrap 3 的网格系统:

<form method="POST">
<div class="container-fluid">
<div class="row">
<div class="col-xs-2">
<label>Option:</label>
</div>
<div class="col-xs-10">
<select class="form-control input-sm">
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
</div>
</div>
</form>

如果您想内联添加更多元素,只需更改 col-xs-*到别的东西。例如,2 个元素看起来像这样:

<div class="col-xs-2">
<label>Option One:</label>
</div>
<div class="col-xs-4">
<select class="form-control input-sm">
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
<div class="col-xs-2">
<label>Option Two:</label>
</div>
<div class="col-xs-4">
<select class="form-control input-sm">
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>

只要你的col-xs-*类在一行中加起来为 12,所有内容都会在同一行上正确显示。注意,您可以关闭一行的 <div>提早标记,即它不必等于 12,但不能超过 12。

希望对您有所帮助!

并查看此 Bootply 示例以查看现场演示:

Bootply

关于html - twitter bootstrap select 覆盖了它的一些标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27931362/

25 4 0