2014-06-22 52 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>