Bootstrap 4-无列换行 [英] Bootstrap 4 - no column wrapping
本文介绍了Bootstrap 4-无列换行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在调整浏览器大小时,我需要防止B4列换行.这是我的代码:
I need to to prevent B4 columns from wrapping when resizing the Browser. Here is my code:
<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>
但是当我缩小它时,它仍然会包裹起来.
But it still wraps when I make it smaller.
感谢您的帮助.
推荐答案
col-xs-*
引导程序4不支持该类.col-xs-*
在引导程序3中已使用 因此,它在引导程序4中的替换是col-*
.
因此您的课程col-xs-4
不能在bootstrap 4中使用.因此,请使用col-4
.
So your class col-xs-4
is not going to work with bootstrap 4. So use col-4
instead.
以下是代码和您的代码.
Here is the code with your code.
<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>
这篇关于Bootstrap 4-无列换行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文