引导布局问题 - 行 div 浮出容器答案

【问题标题】：Bootstrap layout issue - row divs floating out of container引导布局问题 - 行 div 浮出容器
【发布时间】：2016-09-06 19:42:22
【问题描述】：

在我正在构建的网站上，我遇到了两个引导布局问题，我想知道是否有人能指出我哪里出错了。我已将我的网站放在子域上，以便您可以看到我面临的问题。可以在这里找到http://cefn.mywebsitebuild.co.uk//fixtures-results/first-team/

问题一 col-xs-12 fix-result div 漂浮在容器外，我不确定为什么。我也希望它与图像对齐，请在我的图像上看到绿线

第二期 col-xs-12 match-sponsor div 也漂浮在容器外，我不确定为什么

我已经上传了我的页面源http://www.bootlint.com/，它告诉我你的代码有问题。

有人可以告诉我我可以做些什么来让它工作吗？

谢谢保罗

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您可能不想为那张图片调整 div。我强烈建议保留当前的引导设置。相反，如果您想用该图像填充 div，请将此属性添加到该图像的父 div。这样图像将与您的其余 div 对齐。

style="
    padding: 0px 0px;
"

【讨论】：

我想要调整 div（带有蓝色边框）的原因是因为它在手机上看起来不太好。我想要手机上的利润。我的引导程序嵌套好吗？我还在学习这个。谢谢
您建议如何解决问题 2？
@Paul，你的引导嵌套很好，即 row->col->row->col->elements，你不希望有类似 row->col->row->elements 的东西.问题二可以通过添加以下样式来覆盖父 .row div 的样式，margin-right: -10px; margin-left: -10px;
我通过将以下内容应用于父行 div
解决了这个问题。我将创建一个类，在 css 中应用样式，然后添加该类而不是使用内联样式。感谢您的帮助
@Paul，很高兴它对你有用。如果我有帮助，请点赞。

【解决方案2】：

您以不同的方式嵌套行。这是最简单的修复：

<!-- This is your very first row -->
<div class="row">
    <div class="col-md-12">
        <div class="row"> <!-- INSERT ROW HERE -->
            <h4 class="heading-mini">First Team Fixtures &amp; Results</h4>
            <img src="/media/1014/img_5507.jpg?crop=0,0.24305557250976545,0.0000000000000007579122514774,0.33194442749023489&amp;cropmode=percentage&amp;rnd=131162832050000000" class="img-responsive team-photo" alt="" title="">
                <p class="photo-names">Back row (left to right): Paul Griffiths, Nathan Williams, Sam Roberts, Oliver Davies, Jamie Rawlinson</p>
        </div> <!-- END ROW HERE -->
    </div>
</div>

但是，我不会说这是最好的修复...抱歉。（我会选择在其他任何地方删除嵌套的行/列...）

问题 2 是一样的。（在其他任何地方都嵌套了 row->col->row->col。）

【讨论】：

谢谢，最初我的行和列是如此嵌套，但在尝试解决这个问题时，我最终得到了这个标记。引导验证器告诉我这都是有效的标记？

【解决方案3】：

您好，通过将以下内容添加到父行 div 来解决此问题

<div class="row" style="margin-left:0px; margin-right:0px;">

嵌套的引导程序验证，它现在看起来像我想要的（希望它是正确的）

我计划创建一个应用边距修复的类，并将该类应用到父行 div，而不是使用内联样式。

谢谢

【讨论】：