如何增加列之间的间距?

我有两列:

<div class="col-md-6"></div>
<div class="col-md-6"></div>

我怎么在它们之间加一个空格?

输出只是两个相邻的列，占据了整个页面的宽度。假设宽度设置为1000px，那么每个div将是500px宽。

如果我想在两者之间有一个100px的空间，我如何用Bootstrap自动实现这一点:div的大小将变成450px来补偿间距。

当前回答

我不认为你能做到这与Bootstrap单独。列与列之间的空间会自动添加/维护。如果你需要在列之间添加一个特定的宽度，你可以做这个技巧来模拟空间:https://jsfiddle.net/loginet/3rogbh9s/5/

<div class="row">
    <div class="col-6">
        <div class="left-column">Left column</div>
    </div>
    <div class="col-6">
        <div class="right-column">Right column</div>
    </div>
</div>

和CSS

.left-column {
    padding: 10px;
    padding-right: 50px;
    background: white;
}

.right-column { 
    padding: 10px;
    padding-left: 50px; 
    background: white;  
}

2021-10-12 14:48:51

其他回答

    <div class="col-md-12 no_padding header_row"></div>



    <div class="second_row">
        <div class="col-md-4 box_shadow"></div>
        <div class="col-md-8 no_padding_right">
            <div class="col-md-12 box_shadow"></div>
        </div>
    </div>


    body{
    background:#F0F0F0;
}

.main_holder{
    min-height: 600px;
    margin-top: 40px;
    height: 600px;
}
.box_shadow{
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    background: white;
    height: auto;
    min-height: 500px;
}

.no_padding{
    padding: 0px !important;
}

.no_padding_right{
    padding-right: 0px !important;
}

.header_row{
    height: 60px;
    background: #00796B;
    -webkit-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
    -moz-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
    box-shadow: 0px 0px 9px 1px rgba(143,140,143,1); 
}

.second_row{
    position: relative;
    width: 100% !important;
    top: 20px;
}

2016-10-28 07:49:52

简单的方法

.row div{
  padding-left: 8px;
  padding-right: 8px;
}

2018-07-10 03:02:49

<div class="row">

  <div class="col-sm-6">
    <div class="card">
        Content one
    </div>
  </div>

  <div class="col-sm-6">
    <div class="card">
        Content two
    </div>
  </div>

</div>

2020-11-03 10:32:14

我知道我来晚了，但你可以试着用填充物把盒子隔开。

<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>

CSS:

.box {
    padding: 0 5px 0 5px;
}
.box .inner {
    background-color: #fff;
}

试一试

2014-07-25 08:48:44

<div class="row">
    <div class="col-6">
        <div class="left-column">Left column</div>
    </div>
    <div class="col-6">
        <div class="right-column">Right column</div>
    </div>
</div>

和CSS

.left-column {
    padding: 10px;
    padding-right: 50px;
    background: white;
}

.right-column { 
    padding: 10px;
    padding-left: 50px; 
    background: white;  
}

2021-10-12 14:48:51

如何增加列之间的间距?

推荐文章

最新文章

标签