Bootstrap3使原始列的高度都相同-有解無憂

我在那里有一行和兩列，我試圖使其高度與頂部和底部的邊界線應該對齊，還有框陰影。我已經嘗試了大量推薦的解決方案，不包括涉及 javascript 的解決方案，如何使 Bootstrap 列的高度都相同？沒有作業。例如，將此 CSS 添加到行類中不起作用：

.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

我的 CSS：

   
.contact .info  {
  padding: 30px;
  background: #fff;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}
.contact .php-email-form {
  padding: 30px;
  background: #fff;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}

  <section id="contact" class="contact">
      <div class="container">
        <div class="section-title">
          <h2>CONTACT</h2>     
        </div>
 
        <div class="row">   

          <div class="col-md-5">
            <div class="info">
                <div class="email">
                <i class="bi bi-envelope"></i>
                <h4>Email:</h4>
                <p>email</p>
            </div>
            <div class="phone">
                <i class="bi bi-phone"></i>
                <h4>Telephone:</h4>
                <p>95 966 0</p>         
            </div>
            <div class="address">
                <i class="bi bi-geo-alt"></i>
                <h4>Messenger:</h4>
                <p>address</p>
            </div>
            <div class="phone">
                <i class="bi bi-phone"></i>
                <h4>Whatsapp:</h4>
                <p>745 2720</p>
            </div>
            <div class="phone">
                <i class="bi bi-phone"></i>
                <h4>Telegram:</h4>
                <p>745 2720</p>
            </div>
            </div>
          </div>

          <div class="col-md-7">
            <form action="forms/contact.php" method="post" role="form" class="php-email-form">
              <div class="row">
                <div class="form-group col-md-6">
                  <label for="name">N</label>
                  <input type="text" name="name" class="form-control" id="name" required>
                </div>
                <div class="form-group col-md-6">
                  <label for="name">Email</label>
                  <input type="email" class="form-control" name="email" id="email" required>
                </div>
            </div>
             <div class="row">
            <div class="form-group col-md-6">
                <label for="name">Mobile</label>
                <input type="text" class="form-control" name="subject" id="subject" required>
            </div>  
            <div class="form-group col-md-6">
                <label for="name">F</label>
                <input type="text" class="form-control" name="subject" id="subject" required>
              </div>
                 </div>
              <div class="form-group">
                <label for="name">T</label>
                <input type="text" class="form-control" name="subject" id="subject" required>
              </div>
          
              <div class="form-group">
                <label for="name">U</label>
                <textarea class="form-control" name="message" rows="6" required></textarea>
              </div>
              <div class="err">
                <div class="processing">Loading</div>
                <div class="error-message"></div>
                <div class="sent-message">Your message has been sent.!</div>
              </div>
              <div class="text-center"><button type="submit">Send</button></div>
            </form>
          </div> 

        </div>
      </div>
    </section>

uj5u.com熱心網友回復：

你必須對你的CSS非常具體。

我為你的 cols 添加了一個邊框，這樣你就可以看到 col 的高度。

BS3 不是為使用 flex 而設計的，但這并不意味著它不能。

更新：

創建了 2 個 css 類.d-flex，并且.d-flex-item

在 CSS flex 模型display:flex專案中，它們的子專案默認拉伸以適應其容器的高度。

這只有一層深，因此可以與您的布局一起使用：

div.row是一個彈性容器
div.col-md-5：
- 是其父項的彈性專案：div.row
- 是它的孩子的彈性容器div.info
  - div.info是其父項的彈性專案：div.col-md-5
div.col-md-7是其父項的彈性專案：div.row

所有這些都是為了讓 flex 專案能夠伸展到它們的父容器。height在任何彈性專案上設定 CSS將覆寫該stretch專案的默認值。

/* No changes here to your css */

.contact .info {
  padding: 30px;
  background: #fff;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}

.contact .php-email-form {
  padding: 30px;
  background: #fff;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}


/* flex css, see your HTML class attribute */

.d-flex {
  display: flex;      
}

.d-flex-item {
  flex: 1 0 auto;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN Bdg0JdbxYKrThecOKuH5zCYotlSAcp1 c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>


<section id="contact" class="contact">
  <div class="container">
    <div class="section-title">
      <h2>CONTACT</h2>
    </div>

    <div class="row d-flex">
      <div class="col-md-5 d-flex-item d-flex">
        <div class="info d-flex-item">
          <div class="email">
            <i class="bi bi-envelope"></i>
            <h4>Email:</h4>
            <p>email</p>
          </div>
          <div class="phone">
            <i class="bi bi-phone"></i>
            <h4>Telephone:</h4>
            <p>95 966 0</p>
          </div>
          <div class="address">
            <i class="bi bi-geo-alt"></i>
            <h4>Messenger:</h4>
            <p>address</p>
          </div>
          <div class="phone">
            <i class="bi bi-phone"></i>
            <h4>Whatsapp:</h4>
            <p>745 2720</p>
          </div>
          <div class="phone">
            <i class="bi bi-phone"></i>
            <h4>Telegram:</h4>
            <p>745 2720</p>
          </div>
        </div>
      </div>

      <div class="col-md-7 d-flex-item">
        <form action="forms/contact.php" method="post" role="form" class="php-email-form">
          <div class="row">
            <div class="form-group col-md-6">
              <label for="name">N</label>
              <input type="text" name="name" class="form-control" id="name" required>
            </div>
            <div class="form-group col-md-6">
              <label for="name">Email</label>
              <input type="email" class="form-control" name="email" id="email" required>
            </div>
            <div class="form-group col-md-6">
              <label for="name">Mobile</label>
              <input type="text" class="form-control" name="subject" id="subject" required>
            </div>
            <div class="form-group col-md-6">
              <label for="name">F</label>
              <input type="text" class="form-control" name="subject" id="subject" required>
            </div>
            <div class="form-group col-md-6">
              <label for="name">T</label>
              <input type="text" class="form-control" name="subject" id="subject" required>
            </div>

            <div class="form-group col-md-6">
              <label for="name">U</label>
              <textarea class="form-control" name="message" rows="6" required></textarea>
            </div>
            <div class="err">
              <div class="processing">Loading</div>
              <div class="error-message"></div>
              <div class="sent-message">Your message has been sent.!</div>
              <div class="text-center"><button type="submit">Send</button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/516847.html

標籤：htmlcss推特引导

上一篇：Bootstrap5：單擊切換時導航欄不會展開

下一篇：克隆時引導導航選項卡控制原始