divの要素をどのように区切る

Question

divに問題があります。私は各行に3つのdivが必要でしたが、できません。ここでは、インライン要素の典型的な行動を探しているが、あなたは「DIV」ブロック要素を使用しているコードと結果

<div class="col-md-4 col-sm-4 mamali " style="background-color: blue; width: 300px;height: 300px;border-radius: 50%;box-shadow: 3px 3px 3px 2px #888888;"> 
    </div> 

    <div class=" col-md-4 col-sm-4 mamali " style="background-color: black; width: 300px;height: 300px;border-radius: 50%;box-shadow: 3px 3px 3px 2px #888888;"> 
    </div> 

    <div class="col-md-4 col-sm-4 mamali " style="background-color: red; width: 300px;height: 300px;border-radius: 50%;box-shadow: 3px 3px 3px 2px #888888;"> 
    </div> 

    <div class="col-md-4 col-sm-4 mamali " style="background-color: blue; width: 300px;height: 300px;border-radius: 50%;box-shadow: 3px 3px 3px 2px #888888;"> 
    </div> 

    <div class=" col-md-4 col-sm-4 mamali " style="background-color: black; width: 300px;height: 300px; border-radius: 50%;box-shadow: 3px 3px 3px 2px #888888;"> 
    </div> 

and for the css : 

mamali { 
margin-left:190px; 
margin-right:-120px; 
margin-top:50px; 
} 

enter image description here

Answer 1

です。あなたが望む目的を達成できない主な理由は、定義上、ブロック要素が行のスペース全体を占めるからです。ブロック要素ではなく、多くのソリューションの1つは、「スパン」のようなインライン要素を使用します。この方法では、フォーマットの可能性を失うことなく、目的の効果を達成できます.- http://www.campusmvp.es/recursos/post/Que-diferencias-hay-entre-display-block-inline-e-inline-block-en-CSS.aspx

Answer 2

ブートストラップグリッドはグリッド要素の周りに.containerと.rowを必要とします。ここで

• Bootstrap documentation about its Grid

• 行が.container（固定幅）または.container-fluid（全角内に配置する必要があります（ページ全体を見られるように^^^）Bootply with the needed modifications以下です）を使用して適切な位置合わせとパディングを行います。
• 横の列グループを作成するには、行を使用します。
• （...）

---

また、ブートストラップは、それがすでに.col-sm-4 4/12日の（幅として定義されていますので、もしあなたが.col-md-4（中解像度とアップ）を必要としないモバイル最初です小と）そうも媒体上記

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-4 mamali " style="background-color: blue; width: 300px;height: 300px;border-radius: 50%;box-shadow: 3px 3px 3px 2px #888888;"> 
 
    </div> 
 

 
    <div class="col-sm-4 mamali " style="background-color: black; width: 300px;height: 300px;border-radius: 50%;box-shadow: 3px 3px 3px 2px #888888;"> 
 
    </div> 
 

 
    <div class="col-sm-4 mamali " style="background-color: red; width: 300px;height: 300px;border-radius: 50%;box-shadow: 3px 3px 3px 2px #888888;"> 
 
    </div> 
 

 
    <div class="col-sm-4 mamali " style="background-color: blue; width: 300px;height: 300px;border-radius: 50%;box-shadow: 3px 3px 3px 2px #888888;"> 
 
    </div> 
 

 
    <div class="col-sm-4 mamali " style="background-color: black; width: 300px;height: 300px; border-radius: 50%;box-shadow: 3px 3px 3px 2px #888888;"> 
 
    </div> 
 
    </div> 
 
</div>