Bootstrap CSS 设计 div 框 - 居中问题

Question

我正在尝试设计文本框：JS Fiddle。我希望它们居中，但是当它们彼此相邻时我无法让它们出现在页面的中央。非常感谢您的帮助！

    .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;
    }

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

Answer 1

您可以使用 CSS Flexbox 但是您不需要使用 bootstrap 3 类和 bottomboxes col-sm-1.

检查更新后的 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 框 - 居中问题

Bootstrap CSS designing div boxes - centering issues

css

centering

twitter-bootstrap