Question

这看起来很简单，但我似乎无法让它发挥作用。我想要的只是在屏幕右侧和我创建的四个宽列之间应用间距。我试过添加：

.spacer{
    margin-right: 2%;
}

在包含div上失败。我有它在我的八栏上工作，但我似乎无法复制它。 Jfiddle：https://jsfiddle.net/fru2yv1f/

<div class="col-lg-12">
    <div class="row row-top">
        <div class="col-lg-8">
            <div class="horizontal-spacer text-center border-green">
                <div class="vert-center">
                    <h1 id="page-two-heading">Page two Heading</h1>
                    <p id="page-two-sub-heading">Information that is useful, hopefully!</p>
                </div>
            </div>
    </div>
        <div id="side-text" class="col-lg-4 hidden-md hidden-sm hidden-xs border-green">
            <div class="vert-center">
            <h3>This Area Will Disappear on Screen Resize</h3>
            <p>text text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text text</p>
            </div>
        </div>
        </div>

Answer 1

将保证金提供给vert-center。实际上，您正在使用引导网格的所有12列，当您将margin-right添加到具有col-lg-4的div时，它超过了12列的总宽度，因此无法正常工作。

示例摘录

.vert-center {
margin-right: 2%;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-lg-12">
    <div class="row row-top">
        <div class="col-lg-8">
            <div class="horizontal-spacer text-center border-green">
                <div class="vert-center">
                    <h1 id="page-two-heading">Page two Heading</h1>
                    <p id="page-two-sub-heading">Information that is useful, hopefully!</p>
                </div>
            </div>
    </div>
        <div id="side-text" class="col-lg-4 hidden-md hidden-sm hidden-xs border-green">
            <div class="vert-center">
            <h3>This Area Will Disappear on Screen Resize</h3>
            <p>text text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text text</p>
            </div>
        </div>
        </div>

Answer 2

解决方案是使用类col-lg-12向div添加一个类，然后使用padding-right设置div的样式：2％;

实施例

<div class="col-lg-12 spacer">

.spacer{
  padding-right: 2%;
}

添加Bootstrap保证金

2 个答案: