Question

我需要在调整浏览器大小时阻止B4列包装。这是我的代码：

<div class="card card-outline-primary">
<div class="card-block">
    <form class="row">
        <div class="col-xs-4" style="border:solid;border-color:red;border-width:5px;">
            <label for="visualTheme" class="control-label">1234</label>
            <div>
                <input class="form-control" style="height:30px;"/>
            </div>
        </div>
        <div class="col-xs-4" style="border:solid;border-color:blue;border-width:5px;">
            <label class="control-label">5678</label>
            <div>
                <input class="form-control" style="height:30px;" />
            </div>
        </div>
        <div class="col-xs-4" style="border:solid;border-color:green;border-width:5px;">
            <label class="control-label">abcd</label>
            <div>
                <input class="form-control" style="height:30px;" />
            </div>
        </div>
     </form>
</div>

Fiddle

但是当我把它缩小时，它仍然会包裹。

感谢您的帮助。

Answer 1

引导程序4 不支持

col-xs-* 类。col-xs-* 用于bootstrap 3 所以，它的替换在bootstrap 4中是col-*。

因此，您的班级col-xs-4无法使用bootstrap 4.因此请改用col-4。

以下是代码中的代码。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="card card-outline-primary"> <div class="card-block"> <form class="row"> <div class="col-4" style="border:solid;border-color:red;border-width:5px;"> <label for="visualTheme" class="control-label">1234</label> <div> <input class="form-control" style="height:30px;" /> </div> </div> <div class="col-4" style="border:solid;border-color:blue;border-width:5px;"> <label class="control-label">5678</label> <div> <input class="form-control" style="height:30px;" /> </div> </div> <div class="col-4" style="border:solid;border-color:green;border-width:5px;"> <label class="control-label">abcd</label> <div> <input class="form-control" style="height:30px;" /> </div> </div> </form> </div>

Answer 2

接受的答案并不能解决张贴者的问题。

Bootstrap 4 .rows是flex容器，而行中的.col是flex项目。他们提供了许多实用程序类来控制flex容器和项。

要防止行中的列堆叠，请将.flex-nowrap类添加到行中：

<form class="row flex-nowrap">
...
</form>

参考：Bootstrap 4 - Flex Doc's

Bootstrap 4 - 没有列包装

2 个答案: