div col-sm 調整大小

Question

我目前正在使用 Div col sm/md/lg 並且我在它們的三個各自的 col-sm div 中設置了三個圖像。 我需要圖片更大一點，但是當我將 col-sm-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 列 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>