Question

美好的一天，我在让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 -->

我不是Bootstrap的菜鸟，但是行或列间的任何内容都没有正确定位;它是一个线性工作空间。当我在平板电脑上打开它时，内容也无法适应。我在这里做错了吗？

谢谢！

Answer 1

您缺少平板电脑和手机的一些课程。

您只使用col-md-6

示例：手机，平板电脑，台式机

通过使用tablet .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>

Answer 2

如果您使用具有不同主题和模板的 wordpress 找出 boostrap.css 是否正在加载。

您可以使用查看源进行检查并搜索代码 bootstrap.css

在我的情况下，它是随 htbbootstrap.css 一起来的，如果它来了，然后进去搜索 col-lg

您可以在此处看到所有带有其他文本的 boostrap 类前缀

例如

col-lg 带有 htb-col-lg

col-md 带有 htb-col-md

等等。

Wordpress和Bootstrap没有响应

2 个答案: