在不使用 bootstrap 的 WP 模板中使用 Bootstrap

Question

在我的页面中：http://biz166.inmotionhosting.com/~cappie5/affiches/

我正在使用 Bootstrap。

3 张图片的代码：

 <div class="container">
    <div class="row clearfix">
        <div class="col-md-4 column"><a href="http://biz166.inmotionhosting.com/~cappie5/wp-content/uploads/2015/01/Maurin-quina.jpg" class="group1 cboxElement"><img class=" wp-image-759 size-full aligncenter" src="http://biz166.inmotionhosting.com/~cappie5/wp-content/uploads/2015/01/Maurin-quina.jpg" alt="Maurin quina" width="249" height="338"></a></div>
        <div class="col-md-4 column"><a href="http://biz166.inmotionhosting.com/~cappie5/wp-content/uploads/2015/01/Thermogene.jpg" class="group1 cboxElement"><img class=" wp-image-760 size-full aligncenter" src="http://biz166.inmotionhosting.com/~cappie5/wp-content/uploads/2015/01/Thermogene.jpg" alt="Thermogene" width="251" height="338"></a></div>
        <div class="col-md-4 column"><a href="http://biz166.inmotionhosting.com/~cappie5/wp-content/uploads/2015/01/Klaus.jpg" class="group1 cboxElement"><img class=" wp-image-761 aligncenter" src="http://biz166.inmotionhosting.com/~cappie5/wp-content/uploads/2015/01/Klaus-217x300.jpg" alt="Chocolat Klaus" width="244" height="338"></a></div>
</div>

问题是内容在右侧溢出，正如您在 link 中看到的那样。

当我用 chrome 调试 css 时，我看到：

媒体（最小宽度：1200px）。容器 { 宽度：1170px； }

我的理解是Template是固定宽度的，内容是用bootstrap开发的。这种情况怎么办？？？

Answer 1

将您的 .container 更改为 .container-fluid。

.containers 根据您所在的 bootstrap 断点设置为固定宽度。 .container-fluid设置为父元素宽度的 100%。

HTML:

<div class="container-fluid">
  <div class="row clearfix">
    ...
  </div>
</div>

Answer 2

我所做的是删除 boostrap.min.css

中的 css 条规则

@media (min-width:768px){.container{width:750px}}
@media (min-width:992px){.container{width:970px}}
@media (min-width:1200px){.container{width:1170px}

不是很优雅，但是很管用... 我今晚会检查马塞洛的版本，这可能是一个更好的方法。

编辑：Marcelo 的解决方案有效且更优雅。

在不使用 bootstrap 的 WP 模板中使用 Bootstrap

Using Bootstrap in a WP template that doesn't use bootstrap

css

twitter-bootstrap