使用Bootstrap订购不同的div

Question

我无法按照自己的意愿订购不同的div。

首先，我希望卡片的高度与我的头衔相同。 然后，我希望两个按钮的底部与卡的底部处于相同的高度。

我想这是可能的，但是我被困住了……你能帮我吗？

<div class="container" style="width:auto;margin-top:0%">
    <div class="row col-12">
        <div class="5" style="margin-top:2%"><h3>Change your user profile</h3></div>
        <div class="card border-primary md-5 col-6" style="width: auto; margin-left:51%">
            <div class="card-header" style="font-size:22px">Attention</div>
            <div class="card-body">
                <p class="card-text">
                    The modified data must first be validated. <br /><br />
                    A request will be sent as soon as you click on "Submit". <br /><br />
                    It is normal that the old data is still displayed, it means that the validation has not been done yet.
                </p>
            </div>
        </div>
        <div>
            <button type="button" class="btn btn-outline-primary" id="btnMember" onclick="hideCPY()">Personnal</button>
            <button type="button" style="margin-left:1%" class="btn btn-outline-primary" id="btnShowCompany" onclick="hideMember()">Company</button>
        </div>
    </div>

[

Answer 1

您应该删除赋予卡片的margin-left:51%，因为使用引导网格时不需要边距。另外，您应该将按钮移到相同的第一列容器中，以便将它们与标题对齐。

<div class="container" style="width:auto;margin-top:0%">
<div class="row col-12">
   <div class="col-5" style="margin-top:2%">
      <h3>Change your user profile</h3>
      <div>
         <button type="button" class="btn btn-outline-primary" id="btnMember" onclick="hideCPY()">Personnal</button>
         <button type="button" style="margin-left:1%" class="btn btn-outline-primary" id="btnShowCompany" onclick="hideMember()">Company</button>
      </div>
   </div>
   <div class="card border-primary md-5 col-6" style="width: auto;">
      <div class="card-header" style="font-size:22px">Attention</div>
      <div class="card-body">
         <p class="card-text">
            The modified data must first be validated. <br /><br />
            A request will be sent as soon as you click on "Submit". <br /><br />
            It is normal that the old data is still displayed, it means that the validation has not been done yet.
         </p>
      </div>
   </div>
</div>

此外，我强烈建议删除内联样式并改用CSS类。

在这里工作的小提琴：http://jsfiddle.net/omxahu46/

希望这会有所帮助。