在网页设计和开发中，实现元素同行显示是一个常见的需求。Bootstrap4作为一个流行的前端框架，提供了强大的工具来简化这一过程。本文将深入探讨Bootstrap4中实现同行显示的方法，帮助开发者轻松解决布局难题。

Bootstrap4简介

Bootstrap4是Bootstrap框架的最新版本，它提供了一个响应式、移动优先的布局系统。Bootstrap4的核心是网格系统，它允许开发者通过简单的类来创建灵活的布局。

容器和行

在Bootstrap4中，所有布局都需要包裹在一个容器（container）内部。容器提供了响应式宽度，并确保内容在所有设备上都能正确显示。

<div class="container">
  <div class="row">
    <!-- 列内容 -->
  </div>
</div>

这里的<div class="row">是一个行元素，它用于包裹列（columns）。行元素是网格系统的基础，它确保列在水平方向上正确排列。

列

Bootstrap4的列通过类来定义宽度。每个列类都有一个前缀col-，后面跟着响应式断点（如sm、md、lg等）和宽度值。

<div class="col-sm-6 col-md-4 col-lg-3">内容</div>

这个例子中，列在不同屏幕尺寸下的宽度分别为：

• 小屏幕（手机）：6/12
• 中等屏幕（平板）：4/12
• 大屏幕（桌面）：3/12

同行显示

要让多个列同行显示，你可以设置它们的宽度总和为100%或者使用Bootstrap4的响应式工具类。

宽度总和为100%

<div class="col-md-6 col-md-4 col-md-3">内容</div>
<div class="col-md-6 col-md-4 col-md-3">内容</div>
<div class="col-md-6 col-md-4 col-md-3">内容</div>

在这个例子中，三个列的总宽度为100%，因此它们会同行显示。

使用响应式工具类

Bootstrap4提供了.d-flex和.justify-content-between等工具类来帮助实现同行显示。

<div class="row">
  <div class="col-6 d-flex justify-content-between">
    <div>内容1</div>
    <div>内容2</div>
  </div>
  <div class="col-6 d-flex justify-content-between">
    <div>内容3</div>
    <div>内容4</div>
  </div>
</div>

在这个例子中，每个列都被设置为flex容器，并使用.justify-content-between来确保内容在列中均匀分布。

响应式布局

Bootstrap4的网格系统是响应式的，这意味着布局会根据屏幕尺寸自动调整。你可以通过设置不同的列类来控制在不同屏幕尺寸下的布局。

<div class="col-12 col-md-6 col-lg-4">内容</div>

在这个例子中，列在小屏幕上占据整个宽度，在中等屏幕上占据一半宽度，在大屏幕上占据三分之一宽度。

总结

Bootstrap4提供了一个简单而强大的工具来帮助开发者实现同行显示和响应式布局。通过使用容器、行、列和响应式工具类，你可以轻松创建灵活的布局，解决布局难题。