Bootstrap 4 超小列宽度 100% 不工作
Boostrap 4 extra small col width 100% not working
我用 Bootstrap 4 开发了一个静态 HTML 页面,使用 col
等同于大屏幕,但在 Extra small
屏幕上,col 没有得到 100%
width
。我忘记了什么?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<div class="container">
<div class="form-row">
<!-- Grid column -->
<div class="col col-6">
<!-- Material input -->
<div class="md-form">
<input type="text" class="form-control" placeholder="City">
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Material input -->
<div class="md-form">
<input type="text" class="form-control" placeholder="State">
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Material input -->
<div class="md-form">
<input type="text" class="form-control" placeholder="Zip">
</div>
</div>
<!-- Grid column -->
</div>
</div>
Extra small col width 100% not working
列不是 100% 宽度,因为 col
是最小 xs
屏幕尺寸的 auto-layout column,因此列的宽度将继续缩小,并且永远不会堆叠垂直.
只需使用col-sm
...
https://www.codeply.com/go/xb7WffaSmS
<div class="container">
<div class="form-row">
<!-- Grid column -->
<div class="col-sm-6">
<!-- Material input -->
<div class="md-form">
<input type="text" class="form-control" placeholder="City">
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-sm">
<!-- Material input -->
<div class="md-form">
<input type="text" class="form-control" placeholder="State">
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-sm">
<!-- Material input -->
<div class="md-form">
<input type="text" class="form-control" placeholder="Zip">
</div>
</div>
<!-- Grid column -->
</div>
</div>
另请注意,-xs
中缀已在 Bootstrap 中删除 4. 现在最小的 类 很简单 col
, col-6
, col-12
, 等等...
我用 Bootstrap 4 开发了一个静态 HTML 页面,使用 col
等同于大屏幕,但在 Extra small
屏幕上,col 没有得到 100%
width
。我忘记了什么?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<div class="container">
<div class="form-row">
<!-- Grid column -->
<div class="col col-6">
<!-- Material input -->
<div class="md-form">
<input type="text" class="form-control" placeholder="City">
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Material input -->
<div class="md-form">
<input type="text" class="form-control" placeholder="State">
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col">
<!-- Material input -->
<div class="md-form">
<input type="text" class="form-control" placeholder="Zip">
</div>
</div>
<!-- Grid column -->
</div>
</div>
Extra small col width 100% not working
列不是 100% 宽度,因为 col
是最小 xs
屏幕尺寸的 auto-layout column,因此列的宽度将继续缩小,并且永远不会堆叠垂直.
只需使用col-sm
...
https://www.codeply.com/go/xb7WffaSmS
<div class="container">
<div class="form-row">
<!-- Grid column -->
<div class="col-sm-6">
<!-- Material input -->
<div class="md-form">
<input type="text" class="form-control" placeholder="City">
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-sm">
<!-- Material input -->
<div class="md-form">
<input type="text" class="form-control" placeholder="State">
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-sm">
<!-- Material input -->
<div class="md-form">
<input type="text" class="form-control" placeholder="Zip">
</div>
</div>
<!-- Grid column -->
</div>
</div>
另请注意,-xs
中缀已在 Bootstrap 中删除 4. 现在最小的 类 很简单 col
, col-6
, col-12
, 等等...