Question

我试图设计文本框：JS Fiddle。我希望它们居中，但是当它们彼此相邻时，我无法让它们出现在页面的中心。我真的很感谢你的帮助！

＆＃13;

    .bottomboxes {
        border-radius: 30px 30px 30px 30px;
        -moz-border-radius: 30px 30px 30px 30px;
        -webkit-border-radius: 30px 30px 30px 30px;
        border: 1px solid #000000;
        border: 1px solid #000000;
        background: #aaaaaa;
        text-align: center;
        max-width: 200px;
        margin: auto;
    }
    
    .rightbox {
      margin-left: 20px;
    }

＆＃13;

 <div class="row">
      <div class="col-sm-2 bottomboxes">
        <h3>text</h3>
        <p>more text</p>
      </div>
      <div class="col-sm-2 bottomboxes rightbox">
        <h3>text</h3>
      </div>
    </div>

＆＃13;

Answer 1

您可以使用 CSS Flexbox ，但不需要使用bottomboxes和col-sm-1的bootstrap 3课程。

查看更新的 Fiddle （jsFiddle）。

类似的东西：

/* Parent (replaced with .row) */
.content-holder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* Childs (removed .col-sm-1) */
.bottomboxes {
  flex: 1; /* both should be of equal size */
}

/* Styling Resets */
html, body { width: 100%; height: 100%; }

使其具有移动响应能力：

您需要将文本框放在顶部和底部。为此使用移动媒体查询。结帐 Codepen 。

应该看起来像：

/* On Mobiles (i.e. screen-width < 768px) */
@media screen and (max-width: 767px) {
  .content-holder {
     flex-direction: column;
   }
}

希望这有帮助！

Answer 2

您可以将两个div的col-sm-2更改为col-md-6，它们将彼此相邻显示。像这样：

<div class="row">
  <div class="col-md-6 bottomboxes">
    <h3>text</h3>
    <p>more text</p>
  </div>
  <div class="col-md-6 bottomboxes rightbox">
    <h3>text</h3>
  </div>
</div>

Bootstrap CSS设计div框 - 居中问题

2 个答案: