html 如何在Boostrap 4行中设置居中列？

tjvv9vkg 于 2022-12-16 发布在其他

关注(0)|答案(2)|浏览(104)

如何在Bootstrap 4中的行中的列之间有更大的间隙？我尝试了所有方法，但它的居中效果不好。需要有居中列的间隙。因为它看起来很糟糕。图像示例：https://i.stack.imgur.com/1Bkkp.png
代码：

<section id="footer">
  <div class="container">
    <div class="row">
      <div class="col-4">
        <h1>TEST</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      </div>
      <div class="col-4">
        <h1>TEST</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
      <div class="col-4">
        <h1>TEST</h1>
        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form,</p>
      </div>
    </div>
  </div>
</section>

Html

来源：https://stackoverflow.com/questions/74762104/how-to-have-centered-columns-in-row-boostrap-4

2条答案

按热度按时间

ss2ws0br1#

我觉得你会喜欢这个...？？

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" >

    <title>Hello, world!</title>
  </head>
  <body>
    <section >
        <div class="container  " >
          <div class="row d-flex justify-content-center  " >
            <div class="col-4 border  " >
              <h1>TEST</h1>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
            <div class="col-4 border">
              <h1>TEST</h1>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
            <div class="col-4 border">
              <h1>TEST</h1>
              <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form,</p>
            </div>
            
          </div>
        </div>
      </section>

    
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" ></script>

  </body>
</html>

赞(0）回复(0）举报 2022-12-16

k5hmc34c2#

第一个例子：创建一行（）。然后，添加所需数量的列（带有适当. col-- 类的标记）。第一个星星（*）表示响应性：sm、md、lg或xl，而第二颗星星代表一个数字，每行的数字之和应该总是12。

赞(0）回复(0）举报 2022-12-16