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

希望这对您有所帮助!