Question

我对div有一些问题。我希望每行有3个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

Bootstrap Grid需要.container和.row网格元素。这是一个Bootply with the needed modifications及以下（见全页^^^）

Bootstrap documentation about its Grid

行必须放在.container（固定宽度）或.container-fluid（全宽）内，以便正确对齐和填充。

使用行创建水平的列组。

（...）

此外，Bootstrap首先是移动，因此如果已将其定义为.col-md-4（宽度为4/12），则不需要.col-sm-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>

Answer 2

您正在寻找内联元素的典型行为，但您正在使用＆＃34; div＆＃34;块元素。没有达到预期目标的主要原因是，根据定义，块元素占据了整个行的空间。许多解决方案之一是使用内联元素而不是块元素，如＆＃34; span＆＃34;通过这种方式，您可以在不失去格式化的情况下实现所需的效果.-这是一个包含清晰详细说明的链接：http://www.campusmvp.es/recursos/post/Que-diferencias-hay-entre-display-block-inline-e-inline-block-en-CSS.aspx

你如何分裂div中的元素

2 个答案: