Bootstrap 4 - 无列换行

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>

小提琴

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

谢谢您的帮助。

Answer 1

接受的答案没有为海报问题提供解决方案。

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

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

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

参考： Bootstrap 4 - Flex Doc's

Answer 2

col-xs-* bootstrap 4 不支持类。col-xs-* 用于引导程序 3 因此，它在引导程序 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>