Bootstrap 4 - 保持列具有静态宽度且不换行[重复]

Question

我正在尝试使此布局正常工作：当我调整浏览器的大小并且它们不换行时，列保持恒定宽度 - 相反，一旦达到最小宽度，就会出现一个水平滚动条。我的代码：

<div class="card card-outline-primary" style="min-width:500px">
<div class="card-block container-fixed">
    <form class="row">
        <div class="col-4" style="border:solid;border-color:red;border-width:5px;min-width:250px">
            <label for="visualTheme" class="control-label">1234</label>
            <div>
                <input class="form-control" style="height:30px;width:200px" id="visualTheme" />
            </div>
        </div>
        <div class="col-4" style="border:solid;border-color:blue;border-width:5px;min-width:250px">
            <label class="control-label">5678</label>
            <div>
                <input class="form-control" style="height:30px;width:200px" id="startingScreen" />
            </div>
        </div>
        <div class="col-4" style="border:solid;border-color:green;border-width:5px;min-width:250px">

        </div>
     </form>
</div>

还有小提琴： Fiddle

如果我对它们换行的列使用最小宽度。

感谢您的帮助。

Answer 1

在行上使用flex-nowrap 类..

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