ブートストラップCSSがdivボックスを設計する - センタリングの問題

Question

私はテキストボックスを設計しようとしています：JS Fiddle。私はそれらを中心にしたい、しかし、私はそれらがお互いの隣にいるときにページの中央に表示することはできません。私は本当にあなたの助けに感謝します！あなたはCSSフレキシボックスを使用することができますが、その後、あなたがcol-sm-1でbottomboxesとブートストラップ3クラスを使用する必要はありません

.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

。

をチェックアウト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>