Bootstrap 没有装订线答案

【问题标题】：Bootstrap have no gutterBootstrap 没有装订线
【发布时间】：2019-06-10 15:22:47
【问题描述】：

我可以使用没有装订线的引导网格吗？我想要 3 列，一行 http://prntscr.com/6gpmhm 我已经发布了关于我正在使用框架的默认 css 的 css 的标记

<section class="team-block">
	<div class="row">
		<div class="col-sm-4">
			<img src="images/photo-01.jpg" height="534" width="534" alt="image description">
		</div>
		<div class="col-sm-4">
			<img src="images/photo-02.jpg" height="267" width="266" alt="image description">
			<img src="images/photo-10.jpg" height="267" width="266" alt="image description">
			<img src="images/photo-03.jpg" height="267" width="266" alt="image description">
			<img src="images/photo-04.jpg" height="267" width="266" alt="image description">
		</div>
		<div class="col-sm-4">
			<img src="images/photo-05.jpg" height="534" width="534" alt="image description">
		</div>
	</div>
</section>

【问题讨论】：

你能提供更多关于img css的细节吗？你的容器有多大？

标签： html css twitter-bootstrap

【解决方案1】：

要使图像堆叠在一列上，您需要像这样删除 px 宽度并重新定义行：

<div class="col-sm-4">
    <div class="row">
        <div class="col-sm-6">
            <img src="images/photo-02.jpg" class="img-responsive" alt="image description">
        </div>
        <div class="col-sm-6">
            <img src="images/photo-10.jpg" class="img-responsive" alt="image description">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <img src="images/photo-03.jpg" class="img-responsive" alt="image description">
        </div>
        <div class="col-sm-6">
            <img src="images/photo-04.jpg" class="img-responsive" alt="image description">
        </div>
    </div>
</div>

您可以将其添加到您的 css 以删除排水沟：

.col-sm-4    {
    padding: 0px;
}
.col-sm-6    {
    padding: 0px;
}

【讨论】：

【解决方案2】：

你必须使用外部类。

.no-gutter > [class*='col-'] {
  padding-right:0;
  padding-left:0;
}

【讨论】：