Div col-sm调整大小

Question

我目前正在使用Div col /md/lg，我在三个相应的col Div中设置了三个图像。我需要图片更大一点，但是当我将col 4调整为5时，下面的第三张图片会换行，但我需要它们都留在同一行。我做了一些研究，发现如果您的列数超过12列，它将自动换行。但是，在我的三列的左边和右边有很多空格。有没有办法利用其中的一些空间，让我的div列更大，而不用换行？

下面是其中一列的代码：

<div class="col-xs-12 col-sm-4 eq-items">
<div class="row"><img src="/content/pexels-anna-shvets-4226122.jpg" alt="" title="" style="max-width: 100%; max-height: 300px;" data-d2l-editor-default-img-style="true" /><br />
<div class="col-sm-12">
<h3>MyFIRE Instructor Training</h3>
<p style="text-align: left;"><span style="font-family: verdana, sans-serif; font-size: 11pt;">The MyFIRE instructor training courses are provided to help introduce the MyFIRE learning platform. These courses expand upon various training materials that will assist in the addition of content, resources, media, and tools to enhance the student learning experience. We invite you to explore and learn about the many capabilities of SEU's learning platform. Please note: Permissions vary based on instructor role so some editing options may not be available.</span></p>
<p style="text-decoration: underline;"><span style="font-family: verdana, sans-serif; font-size: 11pt;"><a href="/d2l/lor/viewer/viewFile.d2lfile/30233/4225,-1/" target="_blank" rel="noopener">MyFIRE Training Courses for Instructors</a></span></p>
<h1 dir="ltr" style="text-align: center;"><span style="font-family: verdana, sans-serif; font-size: 11pt;"><strong>Contact:&nbsp;</strong></span></h1>
<p dir="ltr" style="text-align: center;"><span style="font-family: verdana, sans-serif; font-size: 11pt;">idttraining@seu.edu</span></p>
</div>
</div>
</div>

Answer 1

首先，你必须初始化de class "row“。

然后，在这个类中配置列。因为您想要三个任意大小的列，所以必须使用类"col-XX-4“(总共3个cols x 4= 12 )。

我建议您只对每个图像使用“col sm-4”，如下例所示：

<div class="row">
        <div class="col-sm-4 thumbnail">
          <img src="https://image.shutterstock.com/image-photo/coffee-cup-beans-on-old-260nw-547416751.jpg" class="img-thumbnail">
        </div>
        <div class="col-sm-4 thumbnail">
          <img src="https://image.shutterstock.com/image-photo/coffee-cup-beans-on-old-260nw-547416751.jpg" class="img-thumbnail">
        </div>
        <div class="col-sm-4 thumbnail">
          <img src="https://image.shutterstock.com/image-photo/coffee-cup-beans-on-old-260nw-547416751.jpg" class="img-thumbnail">
        </div>
</div>