WordPress问题上的Bootstrap流畅布局

Question

Hi Is there any of you out there that is able to assist me on this. I'm experimenting with the fluid layout of bootstrap on my wordpress site. Apparently the isn't working properly. I created a .span 12 column and its not taking up the full width of the browser. Instead its width shrank. Is there a way around this?

Heres the experiment which i created using a custom page template

<?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>

Answer 1

This is because bootstrap has a fixed width of span12 as

.span12 {
    width: 1170px;
  }

for bigger screens.

If you still want, you can try this:

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

Always create a child css file and put that below the bootstrap file.

Answer 2

I would recommend upgrading to Bootstrap 3 as it handles fluid-containers in a much better way and you wouldn't have this problem in the first place.

.span12 becomes col-xx-12 (xx is either xs, sm, md and lg...read up on that!) and has a width of 100%. BS3 uses percentage widths rather than fixed widths as mentioned in the answer above. It's also not too difficult to move from BS2 to 3.

• http://getbootstrap.com/ - download here
• http://getbootstrap.com/getting-started/ - documentation

As a general rule, wordpress won't really change how your website looks. It's the styles you put around it so Wordpress in this case is irrelevant.