Bootstrap回應式列

我正在使用引導程式，我希望專案彼此對齊，到目前為止我已經嘗試使用引導程式列，但它似乎不起作用，我可能寫錯了我的代碼

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

上圖是我希望設計的外觀

請幫助，因為它變得非常令人沮喪。

uj5u.com熱心網友回復：

您需要為每一列添加col類div

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

uj5u.com熱心網友回復：

我想你正在尋找這個。
當瀏覽器寬度小于 767 像素時，專案垂直對齊。

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

uj5u.com熱心網友回復：

我會考慮的方式是您有一行，該行中有 4 列。正如其他人指出的那樣，您需要為每個 Div 提供代碼：.

bootstrap 的作業方式是在頁面上有 12 列，因此您希望每列占據其中的 3 列，這就是為什么col-3如果您只想要 2 列，它會是col-6這樣，依此類推。

對于您想要并排的每一列，它需要包含在以下代碼中：

<div class ="col-3"> 

<div> 

COL 和數字之間的字母是您要指定它將放大到的螢屏尺寸。不使用它也適用于所有設備。

uj5u.com熱心網友回復：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

標籤：html css 网络 bootstrap-4

上一篇：Golang初學者無法解決的問題

下一篇：CSSFlexbox：回流后使用可用空間