背景颜色与引导

我似乎在Bootstrap中排成一行的背景颜色有问题。我希望第二个占位符框右侧的背景是纯色，但现在它考虑了额外的填充，并且它没有正确对齐。目前背景颜色通过主标题图像进行调整。背景颜色与引导

有什么建议吗？您需要在JSFiddle中扩展页面的宽度以查看我在说什么。

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <img class="img-responsive" src="http://placehold.it/1140x360"> 
     </div> 
    </div> 
    <div class="row bg"> 
     <div class="col-md-5"> 
      <img class="img-responsive" src="http://placehold.it/458x304"> 
     </div> 
     <div class="col-md-7"> 
      <p>Text here</p> 
     </div> 
    </div> 
</div> 

body { 
    background-color: #f0f0f1; 
} 
.bg { 
    background-color: #cbede7; 
}

来源

2015-06-19 hufflapuff

不完全确定你在这里问的是什么，你能否对预期的最终结果有更具体的了解？谢谢 – ajmajmajma

我希望青色背景与页面上的页眉图像排成一列（您需要扩展该框，使其不会首先级联）。现在它没有，并且在边缘 – hufflapuff

添加'margin：0px;'到你的'.bg'类似乎这样做，但不确定你的文本对齐问题。 – rch

从左侧栏中移除该右填充

<style> 
.bg { 
    background-color: #cbede7; 
} 
.no-pad-right { 
    padding-right: 0 
} 
</style> 


<div class="container"> 

    <div class="row bg"> 
     <div class="col-md-5 no-pad-right"> 
      <img class="img-responsive" src="http://placehold.it/458x304"> 
     </div> 
     <div class="col-md-7"> 
      <p>Text here</p> 
     </div> 
    </div> 
</div>

编辑：基本上，你会想用填充打转转的col-md-7和col-md-5 divs，以得到你想要的。

此外，还有一个很好的JavaScript解决方案jquery.matchHeight.js，它将每个列与特定的类匹配到该类的最高列 - 这将完全适用于您的情况。 “

”matchHeight使所有选定元素的高度完全相等，它处理导致类似插件失败的许多边缘情况。“

https://github.com/liabru/jquery-match-height

来源

2015-06-19 23:46:12 timgavin

非常感谢！在使用您提供的示例后，我设法得到了期望的效果。 – hufflapuff

很高兴我能帮忙:) – timgavin

.bg { 
    background-color: #cbede7; 
    margin:0; 
}

来源

2015-06-19 23:45:42 HelloWorld

要删除从col-md-5列删除左填充。

http://jsfiddle.net/aukme1mb/9/

我也注意到，你可能会想调整在小屏幕的右侧填充。

来源

2015-06-19 23:54:17 jbg

背景颜色与引导

回答

相关问题