时间戳

首页 > 解决方案 > Bootstrap 6 和 6 未水平对齐

twitter-bootstrap - Bootstrap 6 和 6 未水平对齐

问题描述

任何想法为什么我的对齐不正确？文本字段应位于卡片的左上角。

在此处输入图像描述

        <div class="col-lg-3">
            <div class="card">
                <div class="card-header">Contactgegevens</div>
                <div class="card-body">
                  <a href="http://www.ikzoekmark.nl" target="_blank"><i class="fas fa-user"></i>&nbsp; Mark Ruiter</a><br />
                  <a href="mailto:mark.ruiter@wcw.be"><i class="fas fa-envelope"></i><br />
                  <a href="tel:31653403737"><i class="fas fa-phone"></i>&nbsp; 31653403737</a><br />
                  <a href="https://www.linkedin.com/in/mrmarkruiter/" target="_blank"><i class="fab fa-linkedin-in"></i>&nbsp; LinkedIn</a>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">Contactformulier</div>
                <div class="card-body">

                  <form id="contact" action="#" method="post">

                    <div class="col-lg-6">
                        <div class="form-group" id="naam_div">
                            <input type="text" class="form-control" id="naam" name="naam" value="" placeholder="Uw naam" required>
                        </div>

                        <div class="form-group" id="firma_div">
                            <input type="text" class="form-control" id="firma" name="firma" value="" placeholder="Uw firma" required>
                        </div>

                        <div class="form-group" id="email_div">
                            <input type="email" class="form-control" id="email" name="email" value="" placeholder="Uw email adres" required>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group input-group" id="bericht_div">
                          <textarea name="bericht" id="bericht" class="form-control" rows="3" placeholder="Type hier uw bericht" required>Beste Mark, graag nodig ik je uit voor een kop koffie bij ons.</textarea>
                        </div>

                      <button type="submit" class="btn btn-primary">Verstuur e-mail</button>
                    </div>

                  </form>

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

    </div>
</div>

标签： twitter-bootstrapbootstrap-4

解决方案

您需要将列包装在row类中，以便它们正确对齐。例子：

<div class="row">
   <div class="col-lg-6">Column One</div>
   <div class="col-lg-6">Column Two</div>
</div>

我在你的代码中添加了一个 jsfiddle，这样你就可以看到一个工作版本。希望有帮助。

在一个随机的笔记中，我注意到你忘记在</a>这一行添加一个结束标签，

<a href="mailto:email"><i class="fas fa-envelope"></i><br />

推荐阅读