Bootstrap 4 - 保持列的宽度不变且不换行
Bootstrap 4 - keep columns with static width and no wrapping
我正在尝试使此布局正常工作:当我调整浏览器大小时,列保持恒定宽度并且它们不换行 - 而是在达到最小宽度时立即出现水平滚动条。我的代码:
<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:
Fiddle
如果我对它们换行的列使用最小宽度。
感谢您的帮助。
使用行上的flex-nowrap
class..
<form class="row flex-nowrap"></form>
我正在尝试使此布局正常工作:当我调整浏览器大小时,列保持恒定宽度并且它们不换行 - 而是在达到最小宽度时立即出现水平滚动条。我的代码:
<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: Fiddle
如果我对它们换行的列使用最小宽度。
感谢您的帮助。
使用行上的flex-nowrap
class..
<form class="row flex-nowrap"></form>