Boostrap网格实现边缘右上角

Question

这是我的HTML

Countries

.div1 {
  border: 1px solid black;
  height: 100px;
}
.div2 {
  border: 1px solid green;
  height: 100px;
}
.div3 {
  border: 1px solid red;
  height: 100px;
}
.div4 {
  border: 1px solid blue;
  height: 100px;
}
.div5 {
  border: 1px solid yellow;
  height: 100px;
}

输出

但我原来的网格系统是

顶部和右侧的边距。

如何在bootstrap网格系统上实现此功能

Answer 1

您可以使用标准的Bootstrap方法并在列中添加div：

<div class="container main-content">
    <div class="row">
      <div class="col-md-6"><div class="div1">1</div></div>
      <div class="col-md-6"><div class="div2">2</div></div>
    </div>
    <div class="row">
      <div class="col-md-4"><div class="div3">3</div></div>
      <div class="col-md-4"><div class="div4">4</div></div>
      <div class="col-md-4"><div class="div5">5</div></div>
    </div>
</div>

它会给你列之间的沟通。如果30px太多，你可以覆盖Bootstrap CSS。

要简单地添加margin-top，请将其添加到div1，div2等。

.div1,
.div2,
.div3,
.div4,
.div5{
  margin-top: 10px;
}

工作示例：https://codepen.io/paweljanicki/pen/wzdazq

Answer 2

我想你想为每个col实现这个？

尝试覆盖bootstrap col类：

col-md-1 {margin: 2px 2px 0px 0px;}
col-md-2 {margin: 2px 2px 0px 0px;}

......直到

col-md-12 {margin: 2px 2px 0px 0px;}

如果没有变化，请强制使用！important。

col-md-6 {margin: 2px 2px 0px 0px !important;}

Answer 3

<强>的CSS：

.margin-right-10px{
margin-right:10px;
}
.margin-left-10px{
margin-left:10px;
}

.margin-5px{
margin-left:5px;
margin-right:5px;
}
.margin-top{
margin-top:1px;
}

<强> JS

$(".col-md-6").firstChild.addClass(margin-right-10px);
$(".col-md-6").secondChild.addClass(margin-left-10px);

$(".col-md-4").firstChild.addClass(margin-right-10px margin-top);
$(".col-md-4").secondChild.addClass(margin-5px margin-top);
$(".col-md-4").lastChild.addClass(margin-left-10px margin-top);

您可以根据需要更改css。