Question

我可以使用没有装订线的自举网格吗？我想要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>

Answer 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;
}

Answer 2

你必须使用外部类。

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

Bootstrap没有排水沟

2 个答案: