html - 如何分隔div中的元素

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

• Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
• Use rows to create horizontal groups of columns.
• (…)

---

此外，Bootstrap 是移动优先，因此如果它已被定义为 .col，则您不需要 .col-md-4(中分辨率及以上) -sm-4(小号及以上的宽度为 4/12th，所以也是中号)

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