Question

我有3个列表框作为我的HTML的一部分。我希望列表框填充列，因此ListBox的宽度将与列的宽度相同，但我无法这样做。在'col-md-12'中，列表框的宽度应该几乎是屏幕的宽度。我试过这个：

在每个列表框上设置列表框“width：100％”的宽度。
在每个列表框上设置父div“width：100％”的宽度。
我也尝试在root div上使用容器流体。

但没有运气。

我不想将宽度设置为静态大小（'width：550px'）。

<div class="form-horizontal container">
    <hr />
    <div class="form-group row">
        <div class="col-md-6">
            <select Class="form-control" multiple="multiple" style="font-size:large">
                <option value="1">Test234</option>
                <option value="3">Test123</option>
            </select>
        </div>

        <div class="col-md-6">
            <select Class="form-control" multiple="multiple" style="font-size:large">
                <option value="26">SVC1</option>
                <option value="27">SVC2</option>
                <option value="28">SP1</option>
                <option value="29">PN1</option>
            </select>
        </div>
    </div>

    <div class="form-group row col-md-12">
        <select Class="form-control" multiple="multiple" name="items" style="font-size:large"></select>
    </div>   
</div>

更新＃1：

由于我在这个问题中没有提到这是MVC视图的一部分，所以这里有一点暗示，我盲目地忽略了它，花了好几个小时试图解决。 Mine解决方案工作得很好，但是当您在Visual Studio 2013中创建新的MVC 5网站项目时，它会创建自己的名为Site.css的css文件。在这个文件中它有如下所示的行：

/* Set width on the form input elements since they're 100% wide by default */
input, select, textarea
{
    max-width: 280px;
}

无论你做什么（在我的情况下拉我的头发），都不会让你改变宽度。所以在评论完之后，一切正常。

希望这会对某人有所帮助......

Answer 1

试试这个：

 <hr />
    <div class="panel row">
        <div class="col-md-6">
            <select class="form-control" multiple="multiple" style="font-size:large">
                <option value="1">Test234</option>
                <option value="3">Test123</option>
            </select>
        </div>

        <div class="col-md-6">
            <select class="form-control" multiple="multiple" style="font-size:large">
                <option value="26">SVC1</option>
                <option value="27">SVC2</option>
                <option value="28">SP1</option>
                <option value="29">PN1</option>
            </select>
        </div>
    </div>

    <div class="form-group row col-md-12">
        <select class="form-control" multiple="multiple" name="items" style="font-size:large"></select>
    </div>

DEMO

Answer 2

put＆＃34; form-group col-md-12＆＃34;在＆＃34; row＆＃34;的孩子div中，就像它应该是的那样。同样适用于前两个，使form-group成为一个子div并自行离开。

Fiddle

<div class="form-horizontal container">
<hr />
<div class="row">
    <div class="form-group">
    <div class="col-md-6">
        <select Class="form-control" multiple="multiple" style="font-size:large">
            <option value="1">Test234</option>
            <option value="3">Test123</option>
        </select>
    </div>

    <div class=" col-md-6">
        <select Class="form-control" multiple="multiple" style="font-size:large">
            <option value="26">SVC1</option>
            <option value="27">SVC2</option>
            <option value="28">SP1</option>
            <option value="29">PN1</option>
        </select>
    </div>
    </div>
</div>

<div class="row">
    <div class="form-group col-md-12">
    <select Class="form-control" multiple="multiple" name="items" style="font-size:large"></select>
    </div>
</div>

Answer 3

您必须设置选择标记的宽度100％：

select {
     width:100% !important;
}

设置列表框宽度以填充Bootstrap中的列宽

3 个答案: