Bootstrap 3实现行内所有列等高的问题求助

我有一个包含两列的row，需要让它们高度一致，确保上下边框和box shadow完全对齐。试过多种非JavaScript方案，比如给row添加以下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;
}

HTML结构：

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

解决方法 #

方法1：使用Bootstrap原生flex类

Bootstrap内置了flex布局类，直接给外层row添加d-flex和flex-wrap类即可：

<div class="row d-flex flex-wrap">
  <!-- 你的两列内容 -->
</div>

方法2：自定义CSS强制高度对齐

如果原生类优先级不够，添加以下CSS：

.contact .row {
  display: flex;
  flex-wrap: wrap;
}

.contact .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.contact .info, .contact .php-email-form {
  flex: 1; /* 让内部容器占满列的高度 */
}

原理：将row设为flex容器，列作为flex子项，再让内部的info和php-email-form容器撑满列的高度，实现自动对齐。

方法3：改用Grid布局

若flex方案无效，可尝试Grid布局：

.contact .row {
  display: grid;
  grid-template-columns: 5fr 7fr; /* 对应col-md-5和col-md-7的宽度比例 */
  gap: 15px; /* 可选，设置列间距 */
}

@media (max-width: 768px) {
  .contact .row {
    grid-template-columns: 1fr; /* 移动端自动堆叠 */
  }
}

内容的提问来源于stack exchange，提问作者zoltank