0

嗨，有没有人可以在这方面为我提供帮助。我正在我的 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>
4

2 回答 2

0

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

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

作为一般规则，wordpress 不会真正改变您网站的外观。这是您在它周围放置的样式，因此在这种情况下，Wordpress 是无关紧要的。

于 2014-08-05T14:13:02.073 回答
0

这是因为 bootstrap 的固定宽度 span12 为 

.span12 {
    width: 1170px;
  }

对于更大的屏幕。

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

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

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

于 2013-06-10T23:09:21.353 回答