如何溜溜的div元素seprate

我有一些問題的div。我想每行都有3個div，但我不能。這裏是代碼，結果如何溜溜的div元素seprate

<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

來源

2016-12-06 Alireza Amrollahi

嘗試使用浮動：左使它們對齊 – Sameer

您正在尋找內聯元素的典型行爲，但您使用的是「分區」塊組件。你沒有達到預期目標的主要原因是因爲根據定義，塊元素佔據了線的整個空間。在衆多的解決方案，而不是是塊元素的使用內聯元素，如爲「跨度」這樣就可以實現不失formatting.-這裏的可能性預期的效果是明確和詳細解釋的鏈接：http://www.campusmvp.es/recursos/post/Que-diferencias-hay-entre-display-block-inline-e-inline-block-en-CSS.aspx

來源

2016-12-06 13:34:24

Bootstrap Grid需要一個圍繞網格元素的.container和.row。這裏的一個Bootply with the needed modifications和下方（待觀察全頁^^^）

Bootstrap documentation about its Grid

行必須放在一個.container（固定寬度）內或.container-fluid（全寬）進行正確的對齊和填充。

使用行來創建水平的列組。

（...）

而且引導是移動第一所以你不需要.col-md-4（中等分辨率和高達），如果它已經定義爲.col-sm-4（4/12的寬度小以上所以也介質）

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

來源

2016-12-06 14:27:31 FelipeAls

如何溜溜的div元素seprate

回答

相關問題