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盒 - 居中問題

回答

相關問題