- 首页
- 前端开发
- Bootstrap 4 列和行产生不需要的填充
Bootstrap 4 列和行产生不需要的填充
[英] Bootstrap 4 columns and rows producing unwanted padding
本文介绍了Bootstrap 4 列和行产生不需要的填充的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用引导程序来创建列和行来放置我的图像，但是在图像周围添加了过多的填充，这使我的图像看起来不像设计:
这就是我构建 HTML 的方式:
<标题><div class="容器"><div class="row"><div class="col-md-5"><div class="col-md-12"><img src="{!! $bg_image_col1_row1['url'] !!}" alt="{!! $bg_image_col1_row1['alt'] !!}"/>
<div class="col-md-12"><img src="{!! $bg_image_col1_row2['url'] !!}" alt="{!! $bg_image_col1_row2['alt'] !!}"/>
<div class="col-md-7"><div class="row"><div class="col-md-6"><img src="{!! $bg_image_co21_row1_col1['url'] !!}" alt="{!! $bg_image_co21_row1_col1['alt'] !!}"/>
<div class="col-md-6"><img src="{!! $bg_image_co21_row1_col2['url'] !!}" alt="{!! $bg_image_co21_row1_col2['alt'] !!}"/>
<div class="row"><div class="col-md-12"><div class="容器"><h1>@php(get_field('front-page__title'))</h1><div>@php(get_field('front-page__slogan'))</div>
<div class="row"><div class="col-md-12"><div class="col-md-9"><div class="容器"><div class="zeo-cases-button"><a href="@php(get_field('front-page__button--url'))" class="button">@php(get_field('front-page__button--text'))</a>
<div class="col-md-3"><div class="容器">
</标题><!--/header -->
但这会导致:
我的问题.我是否正确编写了引导程序元素?如果引导程序元素编写正确，我应该如何处理填充，以便我可以满足设计的要求?非常感谢您的时间！
解决方案
将 no-gutters 类添加到每个 div class="row" 以去除它们之间的空格col-* 元素
请参阅 Bootstrap 文档关于装订线.
<div style="background-color:#aaa" class="col-sm-3">a</div><div style="background-color:#bbb" class="col-sm-3">b</div><div style="background-color:#ccc" class="col-sm-3">c</div><div style="background-color:#ddd" class="col-sm-3">d</div>
这里有一个有效的 jsfiddle，它也删除了一次视觉填充"图像不能 100% 放入容器中.
I am trying to use bootstrap to create columns and rows to place my images however too much padding is being added around the images which is preventing my images from looking like the design:
This is how I structured my HTML:
<!-- header -->
<header>
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="col-md-12">
<img src="{!! $bg_image_col1_row1['url'] !!}" alt="{!! $bg_image_col1_row1['alt'] !!}" />
</div>
<div class="col-md-12">
<img src="{!! $bg_image_col1_row2['url'] !!}" alt="{!! $bg_image_col1_row2['alt'] !!}" />
</div>
</div>
<div class="col-md-7">
<div class="row">
<div class="col-md-6">
<img src="{!! $bg_image_co21_row1_col1['url'] !!}" alt="{!! $bg_image_co21_row1_col1['alt'] !!}" />
</div>
<div class="col-md-6">
<img src="{!! $bg_image_co21_row1_col2['url'] !!}" alt="{!! $bg_image_co21_row1_col2['alt'] !!}" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="container">
<h1>@php(get_field('front-page__title'))</h1>
<div>@php(get_field('front-page__slogan'))</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-9">
<div class="container">
<div class="zeo-cases-button">
<a href="@php(get_field('front-page__button--url'))" class="button">@php(get_field('front-page__button--text'))</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="container">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- /header -->
But this is resulting in this:
My question. Did I write the bootstrap elements correctly? How should I go about the padding in case the bootstrap elements are written correctly so that I can match the requirements of the design? Thanks a lot for your time!
解决方案
Add the class no-gutters to each div class="row" to remove the spaces between the col-* elements
See the Bootstrap documentation about gutters.
<div class="row no-gutters">
<div style="background-color:#aaa" class="col-sm-3">a</div>
<div style="background-color:#bbb" class="col-sm-3">b</div>
<div style="background-color:#ccc" class="col-sm-3">c</div>
<div style="background-color:#ddd" class="col-sm-3">d</div>
</div>
Here a working jsfiddle that also removes the "visual padding" once the images doesn't fit 100% into the container.
这篇关于Bootstrap 4 列和行产生不需要的填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
