列Bootstrap3之间的空格

时间:2016-05-29 23:43:06

标签: css html5 twitter-bootstrap-3

我是这个社区的新人,也是一个非常新手的编码员。

我想在这两列之间设置一个空格,我尝试了几个代码,但没有工作......

这就是我所做的:

<div class="container">
    <div class="main row">
        <div class="col-md-3">
            <div class="col-md-12">
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et excepturi eligendi tempore consequuntur voluptas obcaecati dignissimos culpa deserunt aspernatur, ipsa veritatis alias labore laboriosam commodi, quasi fuga quo ab, neque sunt odio voluptatibus nisi? In cupiditate dignissimos est nostrum itaque excepturi, amet aspernatur, atque, quam quasi dolore enim, illo natus tempora explicabo. Soluta quibusdam in exercitationem hic veniam alias, dolores error possimus, quidem, sequi ea tenetur repellendus, doloribus delectus necessitatibus dolorem. Quibusdam atque quae explicabo impedit aperiam repudiandae laborum iure, consequuntur ipsum eaque dolore saepe nam in. Maxime aliquid possimus reprehenderit cumque illum mollitia quos. Placeat quasi eveniet, expedita ex!
                </p>
            </div>
        </div>

        <div class="col-md-9">
            <div class="col-md-12">
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam id aut vero facere recusandae molestiae, iste assumenda, non ad dolor error atque illo possimus blanditiis, voluptatum eligendi ipsam nobis. Suscipit non esse neque magni, maiores impedit. Explicabo nam modi maiores officiis, dolorem dolor sapiente maxime commodi tempore inventore rerum obcaecati ratione possimus repellat similique illo delectus incidunt animi error consequuntur debitis! Ad corporis blanditiis eaque consequatur omnis perspiciatis, et culpa officiis, minus impedit quisquam unde nemo earum quae. Magnam, facere incidunt tenetur voluptatum nostrum odio laboriosam numquam! Autem, itaque molestiae, dignissimos recusandae debitis dolorem voluptatibus dolorum quam error, sit distinctio.
                </p>
            </div>
        </div>
    </div>
</div>  

我得到了这个:

http://i.imgur.com/0dhqCZO.png

如何设置X像素之间的空间? :S

另一个问题是不再发帖:

如何将2列设置为相同的高度? (我知道这是一个很棒的新手问题哈哈)

4 个答案:

答案 0 :(得分:1)

首先,实际上这两列之间有一个空格(30px是由于col-类中包含Bootstrap填充。你没有看到这个30px的差距,因为你将背景设置为col-类为了看到它,你必须在col-类中有另一个div。

CODEPEN EXAMPLE

其次,请阅读 grid system in Bootstrap col-md-12之后不能直接col-md-3(如果要嵌套列,则必须使用其他行在另一栏中。)

您可以通过更改col-类填充来更改差距。 Bootstrap的默认值为每侧15px。例如:

.col-md-3,
.col-md-9 {
  padding-left: 60px;
  padding-right: 60px;
}

CODEPEN EXAMPLE

相同高度的列,最简单的例子就是:

.column-1,
.column-2 {
  height: 300px;
}

CODEPEN EXAMPLE

答案 1 :(得分:0)

使用CSS&#39; margin

<div class="container">
    <div class="main row">
        <div class="col-md-3" style="margin: 10px">
            <div class="col-md-12">
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et excepturi eligendi tempore consequuntur voluptas obcaecati dignissimos culpa deserunt aspernatur, ipsa veritatis alias labore laboriosam commodi, quasi fuga quo ab, neque sunt odio voluptatibus nisi? In cupiditate dignissimos est nostrum itaque excepturi, amet aspernatur, atque, quam quasi dolore enim, illo natus tempora explicabo. Soluta quibusdam in exercitationem hic veniam alias, dolores error possimus, quidem, sequi ea tenetur repellendus, doloribus delectus necessitatibus dolorem. Quibusdam atque quae explicabo impedit aperiam repudiandae laborum iure, consequuntur ipsum eaque dolore saepe nam in. Maxime aliquid possimus reprehenderit cumque illum mollitia quos. Placeat quasi eveniet, expedita ex!
                </p>
            </div>
        </div>

        <div class="col-md-9" style="margin: 10px">
            <div class="col-md-12">
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam id aut vero facere recusandae molestiae, iste assumenda, non ad dolor error atque illo possimus blanditiis, voluptatum eligendi ipsam nobis. Suscipit non esse neque magni, maiores impedit. Explicabo nam modi maiores officiis, dolorem dolor sapiente maxime commodi tempore inventore rerum obcaecati ratione possimus repellat similique illo delectus incidunt animi error consequuntur debitis! Ad corporis blanditiis eaque consequatur omnis perspiciatis, et culpa officiis, minus impedit quisquam unde nemo earum quae. Magnam, facere incidunt tenetur voluptatum nostrum odio laboriosam numquam! Autem, itaque molestiae, dignissimos recusandae debitis dolorem voluptatibus dolorum quam error, sit distinctio.
                </p>
            </div>
        </div>
    </div>
</div>

当然,将10px更改为您想要的任意数量的像素。

由于我们使用影响所有边界的margin,因此10px是列之间空间量的一半。

如果您希望列之间只有margin-right: 10px空格,并且周围没有额外的边距,则可以在第一个上使用10px

  • margin:定义对象所有边框周围的边距
  • margin-top:定义顶部边框的边距
  • margin-bottom:定义bottomborder的边距
  • margin-right:定义右边框的边距
  • margin-left:定义左边框的边距

答案 2 :(得分:0)

您应该为单独的列使用bootstrap gutter。你会在这里找到很好的例子和一些信息 http://arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-gutter-width/

你可以使用.row-eq-height来使col高度相等。

.row-eq-height{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

<div class="row row-eq-height"></div>

此处提供完整信息。 http://getbootstrap.com.vn/examples/equal-height-columns/#

答案 3 :(得分:0)

如果内容框的宽度不是问题,您可以使用col-md-offset- *,其中*可以是1,2,..,12根据您的选择。

<div class="col-md-offset-1 col-md-8">
        <div class="col-md-12">
            <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam id aut vero facere recusandae molestiae, iste assumenda, non ad dolor error atque illo possimus blanditiis, voluptatum eligendi ipsam nobis. Suscipit non esse neque magni, maiores impedit. Explicabo nam modi maiores officiis, dolorem dolor sapiente maxime commodi tempore inventore rerum obcaecati ratione possimus repellat similique illo delectus incidunt animi error consequuntur debitis! Ad corporis blanditiis eaque consequatur omnis perspiciatis, et culpa officiis, minus impedit quisquam unde nemo earum quae. Magnam, facere incidunt tenetur voluptatum nostrum odio laboriosam numquam! Autem, itaque molestiae, dignissimos recusandae debitis dolorem voluptatibus dolorum quam error, sit distinctio.
            </p>
        </div>
    </div>

要将两列设置为相同的高度,您可以将min-height css设置为某个预定义的长度。