Bootstrap网格列填充不同地应用于div标签

我正在使用一个简单的个人站点的引导程序，并试图找出填充列上的CSS规则为什么在不同的div上应用不同的自身。请参阅此fiddle的HTML和CSS - 您可以看到关于我面板下方的白色div更宽。他们有相同的列类，所以我不能确定它为什么会以不同方式影响它们。Bootstrap网格列填充不同地应用于div标签

下面是HTML：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row name-header"> 
 
    <span class="col-xs-12">Tracy King</span> 
 
    </div> 
 
    <div class="col-xs-12 col-lg-8 col-lg-offset-2"> 
 
    <div class="row-panel"> 
 
     <p>About Me</p> 
 
    </div> 
 
    </div> 
 
    <div class="content-panel col-xs-12 col-lg-8 col-lg-offset-2"> 
 
    <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
 
     doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
 
     veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim 
 
     ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia 
 
     consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque 
 
     porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci 
 
     velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore 
 
     magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum 
 
     exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi 
 
     consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit 
 
     esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo 
 
     voluptas nulla pariatur?"</p> 
 
    </div> 
 
    <div class="col-xs-12 col-lg-8 col-lg-offset-2"> 
 
    <div class="row-panel"> 
 
     <p>Code Samples</p> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-12 col-lg-8 col-lg-offset-2"> 
 
    <div class="row-panel"> 
 
     <p>Sample Apps</p> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-12 col-lg-8 col-lg-offset-2"> 
 
    <div class="row-panel"> 
 
     <p>Other Projects</p> 
 
    </div> 
 
    </div> 
 
</div>

有一些自定义的CSS我列入小提琴。我认为在那里看看它可能会更有帮助，但如果需要的话，我可以将它移到我的问题上。提前致谢。任何有识之士都非常感谢！

来源

2016-03-20 tracyak13

他们是相同的宽度。这只是白色的div有背景色，而我的div没有。背景颜色应用于填充。它给出了白色div更宽的幻觉，但是如果您通过浏览器检查工具查看它们，则会看到它们的宽度相同。 –

你的代码没有问题，应用'content-panel'给每个div，你会看到你正在说的'padding'[小提琴]（https://jsfiddle.net/mxtxcqas/） – dippas

我看到了 - 如果我将内容面板类添加到调出列的div内的div上，这是我希望的宽度。感谢您的呼唤！ – tracyak13

要小心，无论你正在使用同事*类当u是把行格之前他们

例

<div class="row"> 
    <div class="col-md-12 col-lg-8"></div> 
    <div class="col-md-12 col-lg-4"></div> 
</div> 

<div class="row"> 
    <div class="col-md-12 col-lg-8"></div> 
</div>

基本上行的div有调整的填充切缘阴性你的col div。

，所以你必须使用标准的结构引导即

<div class="container"> 
    <div class="row"> 
    <div class="col-md-12 col-lg-8"></div> 
    <div class="col-md-12 col-lg-4"></div> 
    </div> 

    <div class="row"> 
    <div class="col-md-12 col-lg-8"></div> 
    </div> 
</div>

你的情况

ü没有使用行格后名头类的div出现的问题与填充

来源

2016-03-20 11:59:41

同意伊斯梅尔法鲁克给出的答案。

bootstrap中定义了结构。一些基本规则：

1）行类

2）添加行类之前添加容器/容器流体类中的任何同事*类

3）即使对于*嵌套同事之前，加行前col- *

来源

2016-03-20 13:28:08 Vinaya

Bootstrap网格列填充不同地应用于div标签

回答

相关问题