2014-06-22 31 views
0

美好的一天, 我有一个问题得到Bootstrap与Wordpress的功能。我目前的主题是奇妙的工作,并且当我试图实施Bootstrap时,它并没有提高响应能力......但它将容器居中! 无论如何,我会打破文件,尽量让他们尽可能简单,我可以遵循。WordPress的和Bootstrap没有响应

的header.php

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
       <header role="banner"> 
        Header related wp code. 
       </header> 

     </div> 
    </div> 

page.php文件

<?php 
get_header(); ?> 

<div class="row"> 
<div class="col-md-6"> 
    body related wp code 
</div> 


<?php get_sidebar(); ?> 

<?php get_footer(); ?> 

的sidebar.php

<div class="col-md-6"> 
    <aside> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
      voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
      non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 

    </aside> 
</div> 
</div> <!-- End .row --> 

页脚

<div class="row"> 
<div class="col-md-12"> 
    <footer> 
     Footer related wp code here. 
     </p> 

     </footer> 
     </div> 
    </div> 
</div> <!-- end of .container --> 

我不是引导一个小白,但没有行或列的跨度是正确地定位自身内部;它是一个线性工作区。当我在平板电脑上打开它时,内容也无法修复。 我在这里做错了什么?

谢谢!

回答

0

您错过了平板电脑和手机的一些课程。

只使用COL-MD-6

例如:手机,平板电脑与平板电脑.COL-SM-*类创建更加动态和强大的桌面布局与前面的例子

构建。

来源:http://getbootstrap.com/css/#grid

移动,平板电脑和桌面检查为例。

<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> 
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
</div> 
<div class="row"> 
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> 
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> 
    <!-- Optional: clear the XS cols if their content doesn't match in height --> 
    <div class="clearfix visible-xs"></div> 
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> 
</div>