如何溜溜的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

回答

相关问题