关于 wordpress 问题的 Bootstrap 流体布局答案

【问题标题】：Bootstrap fluid layout on wordpress issue关于 wordpress 问题的 Bootstrap 流体布局
【发布时间】：2014-08-05 22:13:02
【问题描述】：

嗨，有没有人可以在这方面为我提供帮助。我正在我的 wordpress 网站上尝试引导程序的流畅布局。显然无法正常工作。我创建了一个 .span 12 列，它没有占据浏览器的整个宽度。相反，它的宽度缩小了。有没有办法解决这个问题？

这是我使用自定义页面模板创建的实验

<?php
/*
Template Name: page-work
*/
?>
<?php get_header(); ?>    
<h1><?php the_title(); ?></h1>

<style type="text/css">

.span12{
    background:black;
    color:white;
    padding:20px 0;
    text-align:center;
    margin-top:15px;
}

.span6{
    background:blue;
    color:white;
    padding:20px 0;
    text-align:center;
        margin-top:15px;
}

</style>

<div class="container-fluid">

   <div class="row-fluid">

     <div class="span12">span 12</div>

</div>

   <div class="row-fluid">

     <div class="span6">span 6</div>
     <div class="span6">span 6</div>

   </div>

</div>

【问题讨论】：

您可以在 jsfiddle 中重现您的问题或链接到您的网站吗？我建议不要为实际的 Bootstrap span6、span12 类等设置样式。最好仅将它们用于您的网格，并在其中放置其他元素并设置这些元素的样式。这将使您的代码更易于理解和组织。
一般来说，最上面的父级不会占据屏幕的全宽。它将在每一侧添加半边距，以防止您的内容接触浏览器的 chrome。
Billy Moat：您好，感谢您的回复，样式只是暂时的。无论如何这里是链接designbyjourney.com/work
道森：我已经删除了父级，问题仍然存在。
无论如何，不要认为 jsfiddle 可以解决这个问题，我在 wordpress 上使用引导框架。

标签： php html css wordpress twitter-bootstrap

【解决方案1】：

这是因为 bootstrap 有一个固定宽度 span12 as

.span12 {
    width: 1170px;
  }

适用于更大的屏幕。

如果你还想要，你可以试试这个：

@media (min-width: 1200px) {
    .span12 {
        width: 100%;
    }
}

始终创建一个子 css 文件并将其放在引导文件下方。

【讨论】：

【解决方案2】：

我建议升级到 Bootstrap 3，因为它可以更好地处理流体容器，而且您一开始就不会遇到这个问题。

.span12 变为 col-xx-12 （xx 是 xs、sm、md 和 lg...请阅读！）并且宽度为 100%。 BS3 使用百分比宽度而不是上面答案中提到的固定宽度。从BS2转到3也不是太难。

http://getbootstrap.com/ - 在这里下载
http://getbootstrap.com/getting-started/ - 文档

一般来说，wordpress 不会真正改变您网站的外观。这是你在它周围放置的样式，所以在这种情况下 Wordpress 是无关紧要的。

【讨论】：