小型设备中的Bootstrap 4 Grid问题
很棒的设计师
我的代码如下
<div class="row align-items-center">
<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12">
One of three columns
</div>
<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12">
One of three columns
</div>
</div>
CSS如下所示
.row {
height: calc(70vh - 60px);
}
当我签入移动设备或小型设备网格项目时，请在上部和下部放置一些空间。屏幕截图如下
你可以看到空间。我想使div没有空间。我怎么能够？
华西
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div style="height: 200px;background-color: sandybrown;" class="d-flex align-items-center justify-content-center">
<div class="row no-gutters d-flex bg-primary">
<div class="col-12 col-md-6 bg-info">on small 12-cols and medium or above 6-cols</div>
<div class="col-12 col-md-6 bg-warning">on small 12-cols and medium or above 6-cols</div>
</div>
</div>如果您不希望在空白屏幕上进行边距填充或边距填充，则可以media query在scss
@media (max-width: 576px) {
margin: 0px; padding: 0px
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
IE 11中的FormData未定义
- 2
如何一次从多个文本框中获取值？
- 3
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 4
OpenCv：改变 putText() 的位置
- 5
Redux动作正常，但减速器无效
- 6
如何从JavaScript中的MP3文件读取元数据属性？
- 7
如何使用Redux-Toolkit重置Redux Store
- 8
将加号/减号添加到jQuery菜单
- 9
OpenGL纹理格式的颜色错误
- 10
获取并汇总所有关联的数据
- 11
超过时间限制错误C ++
- 12
ActiveModelSerializer仅显示关联的ID
- 13
在交互式Python Shell中获得最后结果
- 14
如何开始为Ubuntu开发
- 15
去噪自动编码器和常规自动编码器有什么区别？
- 16
Excel 2016图表将增长与4个参数进行比较
- 17
算术中的c ++常量类型转换
- 18
使用因子时如何在y轴上的ggplot中插入count或％
- 19
TreeMap中的自定义排序
- 20
如何在R中转置数据
- 21
在 React Native Expo 中使用 react-redux 更改另一个键的值
我来说两句