Bootstrap CSS设计div盒 - 居中问题

我试图设计文本框：JS Fiddle。我希望它们居中，但当它们彼此相邻时，我无法让它们出现在页面的中心。我将衷心感谢您的帮助！Bootstrap CSS设计div盒 - 居中问题

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

来源

2016-11-06 user3504783

我建议你编辑你的文章，并在同一时间问一个问题 –

您可以使用CSS Flexbox的但你并不需要使用自举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; 
    } 
}

希望这有助于！

来源

2016-11-06 13:06:28

谢谢！这会让我的网站反应迟钝吗？ – user3504783

它实际上运行得非常好，解决了我所有的问题，但是即使在小屏幕上，文本框仍然相邻，因此我认为我更愿意使用Bootstrap网格系统。在网格系统中有没有办法达到这种效果？ – user3504783

@ user3504783是啊！为此，您需要应用移动媒体查询，检查我的更新答案。 –

您可以将两个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>

来源

2016-11-06 13:41:39 labanch

谢谢，但我如何让他们居中？ – user3504783

Bootstrap CSS设计div盒 - 居中问题

回答

相关问题