ブートストラップコンテナ内でdivカラムを整列する

Question

私はいくつかの製品を紹介しなければならないウェブページに取り組んでいます。私は現在、他の特化した製品ページを開く3つの主要製品を持っています。私の現在の問題は、divのアラインメントです。私は等間隔の列を作成するためにブートストラップ列を使用しています。しかし、何とか最初のdivがコンテンツ領域の左側に付けられています。私が持っている

<div class="row"> 

    <div class="col-sm-3 col-md-3 col-lg-3 productbox" 
     style="background-color: lightgray;"> 
     <div class="producttitle">Product 11</div> 
    </div> 
    <div class="col-sm-3 col-md-3 col-lg-3 productbox col-sm-offset-1 col-md-offset-1 col-lg-offset-1 " 
     style="background-color: yellow;"> 
     <div class="producttitle">Product 21</div> 
     </div> 
    <div class="col-sm-3 col-md-3 col-lg-3 productbox col-sm-offset-1 col-md-offset-1 col-lg-offset-1" 
     style="background-color: red;"><div class="producttitle">Product 31</div></div> 
</div> 

：これは、製品タブをクリックしたときにロードされているページです

<div class="container"> 
     <div class="row"> 
      <div class="row-sm-12 row-md-12 row-lg-12 content" 
       style="background-color: lightblue;"></div> 
     </div> 
    </div> 

：

<style> 
body { 
    color: white; 
} 

.topnav>a:hover { 
    background-color: black; 
    color: white; 
} 

.content { 
    height: 400px; 
    overflow-y: auto; 
} 

div { 
    padding: 10px; 
} 

.productbox { 
    box-shadow: 0 8px 6px -6px #999; // 
    border: 2px solid gray; 
    background-image: url('http://placehold.it/460x250/ffffff&text=HTML5'); 
    height: 25vh; 
    width: 20vw; 
    border: 1px solid black; 
    align:center; 
} 

.producttitle { 
    font-weight: bold; 
    padding: 5px; 
    color: black; 
    text-align: center; 
} 
</style> 

コンテナHTML：ここ

は、メインCSSですこのリンクにページを更新しました：http://sampledreamstore.000webhostapp.com/。

コンテンツをモバイルデバイスで表示するための柔軟性を維持しながら、列を適切に整列させるにはどうすればよいですか。

更新は：アライメントの問題を再現するためにjsfiddleサンプルを追加：https://jsfiddle.net/gp1uux1q/

Answer 1

あなただけ等間隔divを持ってしようとしているなら、あなたは列の内側にあなたの製品の箱を置く必要があります。各列にはパディングがあるため、ブートストラップ構造に実際に特別なことをする必要はありません。また、かなりの数の悪い習慣があります。これを達成するためには、多くのマークアップを削除することができます。まず最初にrow-sm-12 row-md-12 row-lg-12はブートストラップのものではありません。何もしていないので、それを持つ理由はありません。青色の背景が必要な場合は、クラスcontentを持っているか、このクラスを列を囲む行に追加できます。また、列クラスを記述するときは、大規模から小規模に移行することをお勧めします。例えば。

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-8"> 

次あなたは自分の列の幅は、あなただけの最小の画面サイズで、一度それを述べるために必要なすべての画面サイズで同じである必要があるとしている場合。したがって、col-lg-3 col-md-3 col-sm-3が必要な場合は、col-sm-3と記載する必要があります。上記の大きさであれば、世話をします。

また、偶数列を探している場合、何らかの理由で余分なスペースが必要な場合を除き、オフセットを使用する理由はありません。私はあなたの質問から推測しています。

マークアップに不要な入れ子になった行があります。そのため、コンテンツ領域に水平スクロールバーが表示されます。

次に、3つのボックスを連続して使用しようとしている場合にcol-sm-4を使用している場合は、左側のボックスがコンテナの側面に貼り付けられているようです。実際にそこから余分なスペースがあって、右の列を記入する別の列がない場合。

すべてのことは私が何をあなたが探しては、以下のようなマークアップだと思う言われている。ここで

<div Class="container"> 
    <div class="row content"> 
    <div class="col-xs-4"> 
     <div class="product-box"> 
     A Product Here 
     </div> 
    </div> 
    <div class="col-xs-4"> 
     <div class="product-box"> 
     A Product Here 
     </div> 
    </div> 
    <div class="col-xs-4"> 
     <div class="product-box"> 
     A Product Here 
     </div> 
    </div> 
    </div> 
</div> 

は、この例のフィドルは、私はちょうどその簡単にするのでcol-xs-3を使用この例ではFiddle Demo

ですフィドルで見る。しかし、それをcol-sm-3に変更することができます。あなたの質問に基づいて、私は正しく理解すれば、これがあなたの探しているものだと思う。コメントで私に知らせていない場合、私はそれに応じて調整します。