Html 分区列sm调整大小

Html 分区列sm调整大小,html,image,size,Html,Image,Size,我目前正在与Div col sm/md/lg合作,我在他们各自的三个col sm Div中设置了三个图像。我需要图片稍微大一点,但是当我调整col-sm-4到5时,第三张图片会在下面环绕,但我需要它们都保持在同一行。我做了一些研究,发现如果你的列超过12列,它会自动换行。然而,在我的三列的左侧和右侧有大量的空白。有没有一种方法可以利用这些空间,不用包装就可以把我的div columns放大 以下是其中一列的代码: <div class="col-xs-12 col-sm-4 eq

我目前正在与Div col sm/md/lg合作,我在他们各自的三个col sm Div中设置了三个图像。我需要图片稍微大一点,但是当我调整col-sm-4到5时,第三张图片会在下面环绕,但我需要它们都保持在同一行。我做了一些研究,发现如果你的列超过12列,它会自动换行。然而,在我的三列的左侧和右侧有大量的空白。有没有一种方法可以利用这些空间,不用包装就可以把我的div columns放大

以下是其中一列的代码:

<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>


MyFIRE教练培训 MyFIRE讲师培训课程旨在帮助介绍MyFIRE学习平台。这些课程扩展了各种培训材料,有助于增加内容、资源、媒体和工具,以增强学生的学习体验。我们邀请您探索和了解东南大学学习平台的许多功能。请注意:权限因讲师角色而异,因此某些编辑选项可能不可用

联系人:

idttraining@seu.edu


首先,必须初始化de类“行”

然后,在此类中配置列。由于需要任意大小的三列,因此必须使用类“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>

首先,必须初始化de类“行”

然后,在此类中配置列。由于需要任意大小的三列,因此必须使用类“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>