Question

我正在使用bootstrap。需要放置两个行高相等的卡片。每张卡都放在col-xs-6内。卡包含文本和按钮。当我使用col-height col-xs-6 card卡同时加入时。可以请帮助我。

<div class="row">
      <div class="row-height">
        <div class="col-height col-middle col-xs-6 card">
          <div class="row">
            <div class="col-xs-12 text-center">
              <h3 class="heading-s1">Login</h3>
            </div>
            <div class="col-xs-12 text-center">
              <a href="javascript:void(0);" class="btn big-btn no-border red-background unstyle-anchor" style="padding: 13px 50px;">Login!</a>
            </div>
          </div>
        </div>
        <div class="col-height col-middle col-xs-6 card">
          <div class="row">
            <div class="col-xs-12 text-center">
              <h3 class="heading-s1">Sign UP</h3>
            </div>
            <div class="col-xs-12 text-center">
              <a href="javascript:void(0);" class="btn big-btn no-border red-background unstyle-anchor" style="padding: 13px 50px;">Sign Up!</a>
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 1

你想要的吗？

.row应该包含在.container

中

＆＃13;

.card {
  border: 1px solid black;
  margin: 10px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row-height">
    <div class="row">
      <div class="col-height col-middle col-xs-5 pull-left card">
        <div class="col-xs-12 text-center">
          <h3 class="heading-s1">Login</h3>
        </div>
        <div class="col-xs-12 text-center">
          <a href="javascript:void(0);" class="btn big-btn no-border red-background unstyle-anchor" style="padding: 13px 50px;">Login!</a>
        </div>
      </div>
      <div class="col-height col-middle col-xs-5 pull-right card">
        <div class="col-xs-12 text-center">
          <h3 class="heading-s1">Sign UP</h3>
        </div>
        <div class="col-xs-12 text-center">
          <a href="javascript:void(0);" class="btn big-btn no-border red-background unstyle-anchor" style="padding: 13px 50px;">Sign Up!</a>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

如何使用bootstrap以相同的高度水平显示两张卡片

1 个答案: