Question

在我的代码中，我使用bootstrap css进行样式化。我已经编写了一个带有类窗体控件的下拉菜单的代码。问题是我无法调整表单的宽度。现在就像占据网页的总宽度一样：

----------------------------------------------- -------------------------------------------------- ------- |选择

选项

我只需要调整下拉列表的大小。我是这个领域的全新人物。有人可以帮帮我。我附上了代码的一部分：

<body>    
    <select class="form control">
        <option value= "1">one</option>
        <option value= "2">two</option>
        <option value= "3">three</option>
    </select>
</body>

bootstrap link

Answer 1

将您自己的样式表链接到文档...

在此文档中声明类form-control ..或者在旁边的html中添加一个新类，然后添加高度/宽度属性：

HTML：

<select class="form-control resizeformc">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</select>

CSS：

.resizeformc {
    width: 150px;
    height:200px;
}

Answer 2

好吧，如果您使用的是Bootstrap，默认情况下，类.form-control具有以下属性：

.form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}

因此，如果您使用的是bootstrap，则必须使用自定义类/ id覆盖它，或者设置具有固定宽度的父级。

HTML

<div class="form-container">
    <select class="form control">
        <option value= "1">one</option>
        <option value= "2">two</option>
        <option value= "3">three</option>
    </select>
</div>

CSS

.form-container{
    width: 30%; //or width: 200px, etc
}

Answer 3

您可以尝试使用引导网格系统。将“col-xs-4”等预定义的响应类添加到select元素的类列表中。（请注意，这只会覆盖您的宽度要求，但如果所有元素都使用网格系统，则可以帮助保持表单整洁，整齐有序）。

可以在http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

找到有关引导网格系统的有用参考资料

调整bootstrap

----------------------------------------------- -------------------------------------------------- ------- |选择

3 个答案:

HTML

CSS