我需要在调整浏览器大小时防止包装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>
但是当我把它做得更小时,它仍然会包裹起来.
谢谢您的帮助.
解决方法
bootstrap 4中不支持col-xs- * class.在bootstrap 3中使用了.col-xs- *因此,它在bootstrap 4中的替换是col- *.
所以你的类col-xs-4不适用于bootstrap 4.所以请改用col-4.
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>
