引导响应列答案

【问题标题】：Bootstrap responsive columns引导响应列
【发布时间】：2021-12-23 02:47:19
【问题描述】：

我正在使用引导程序，我希望项目彼此相邻对齐，到目前为止，我已经尝试使用引导程序列，但它似乎不起作用，我的代码可能写错了

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">
      <h6>
        We've funded 120,000 charity projects for 20M people around the world.
      </h6>

      <h6>
        Clean Water
      </h6>
      <i class="fas fa-tint"></i>
      <p>
        633 million people drink dirty water. With your help we supply clean water which can improve health
      </p>

      <h6>Healthy food</h6>
      <i class="fas fa-seedling"></i>
      <p>
        With your help we have provided good healthy food to the less fortunate.
      </p>

      <h6>
        Education
      </h6>
      <i class="fas fa-book"></i>
      <p>We have developed schools with the donations received, so children can have access to good education</p>
    </div>
  </div>
</div>

上图是我希望设计的样子

请帮忙，因为它变得非常令人沮丧。

【问题讨论】：

您已将所有内容放在一个列中。您为什么希望看到多个？

标签： html css web bootstrap-4

【解决方案1】：

我的想法是，你有一行，那一行有 4 列。正如其他人指出的那样，您需要为每个 Div 提供代码：class="col-3"。

bootstrap 的工作方式是在页面上设置 12 列，因此您希望每列占据其中的 3 列，这就是为什么它是 col-3 如果您只想要 2 列它会是 col-6等等。

对于您希望并排的每一列，需要将其包装在以下代码中：

<div class ="col-3"> 

<div>

COL 和数字之间的字母是如果您想指定它将放大到的屏幕尺寸。不使用它也适用于所有设备。

【讨论】：

【解决方案2】：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <i class="fas fa-3x fa-code"></i>
      <div>
        <h5 class="py-2">Clean Code</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
      </div>
    </div>
    <div class="col-md-3">
      <div>
        <i class="fas fa-3x fa-cogs"></i>
        <h5 class="py-2">Problem Solving</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
      </div>
    </div>
    <div class="col-md-3">
      <i class="fas fa-3x fa-globe"></i>
      <div>
        <h5 class="py-2">Best Domain</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
      </div>
    </div>
    <div class="col-md-3">
      <i class="fas fa-3x fa-user-shield"></i>
      <div>
        <h5 class="py-2">Secure Website</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
      </div>
    </div>
  </div>
</div>

【讨论】：

您的回答应该包括对您所做更改的一些解释。

【解决方案3】：

我想你正在寻找这个。
当浏览器宽度小于 767px 时，项目垂直对齐。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<div class="container">
  <h6>
    We've funded 120,000 charity projects for 20M people around the world.
  </h6>
  <div class="row mt-5">
    <div class="col-12 col-md-4 mb-2 mb-md-0">
      <h6>
        Clean Water
      </h6>
      <i class="fas fa-tint"></i>
      <p>
        633 million people drink dirty water. With your help we supply clean water which can improve health
      </p>
    </div>
    <div class="col-12 col-md-4 mb-2 mb-md-0">
      <h6>Healthy food</h6>
      <i class="fas fa-seedling"></i>
      <p>
        With your help we have provided good healthy food to the less fortunate.
      </p>
    </div>
    <div class="col-12 col-md-4 mb-2 mb-md-0">
      <h6>
        Education
      </h6>
      <i class="fas fa-book"></i>
      <p>We have developed schools with the donations received, so children can have access to good education</p>
    </div>
  </div>
</div>

【讨论】：

【解决方案4】：

您需要在每列的div 中添加col 类

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12">
      <h6>
        We've funded 120,000 charity projects for 20M people around the world.
      </h6>
    </div>

    <div class="col">
      <h6>
        Clean Water
      </h6>
      <i class="fas fa-tint"></i>
      <p>
        633 million people drink dirty water. With your help we supply clean water which can improve health
      </p>
    </div>
    <div class="col">
      <h6>Healthy food</h6>
      <i class="fas fa-seedling"></i>
      <p>
        With your help we have provided good healthy food to the less fortunate.
      </p>
    </div>
    <div class="col">
      <h6>
        Education
      </h6>
      <i class="fas fa-book"></i>
      <p>We have developed schools with the donations received, so children can have access to good education</p>
    </div>
  </div>
</div>

【讨论】：