Question

我使用Bootstrap创建了一个简单的自定义WordPress主题，我遇到的问题是当我使用WordPress更新内容时，内容没有响应，因为它应该是。

图片和文字没有像通常的Bootstrap元素一样响应。

我包含了所有CSS文件。

即使我使用文本选项卡手动编写HTML代码，例如：

<p> Hi this is a sample post.......................... </p>

当我保存并运行网站时，当我调整屏幕大小时，上面的元素没有响应。

我在网站上的图片只是响应式的，因为我将其与WordPress中的图片选项中的CSS类img-responsive相关联。

为什么会发生这种情况？

您可以查看网站here

index.php源代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
     <link rel = "stylesheet" type = "text/css" href = "style.css"/>
    <link href="<?php echo get_stylesheet_directory_uri() ?>/css/bootstrap.min.css" rel="stylesheet">
    <link href="<?php echo get_stylesheet_directory_uri() ?>/css/bootstrap.theme.min.css" rel="stylesheet">
    <link href="<?php echo get_stylesheet_directory_uri() ?>/css/bootstrap.theme.css" rel="stylesheet">
    <link href="<?php bloginfo('stylesheet_url');?>"rel="stylesheet" type="text/css"/>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>

    <![endif]-->
     <?php wp_enqueue_script("jquery"); ?>
    <?php wp_head(); ?>
  </head>
  <body>

 <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <?php wp_list_pages('title_li=');?>

      </ul>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>



    <h1>Hello, world!</h1>



<div style="width:100%" class="alert alert-danger"> Danger</div>

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>  <?php the_content(); ?>  <?php endwhile; endif; ?>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/holder.js"></script>
    <script>
    $('.carousel').carousel({
  interval: 2000
})
    </script>
      <?php wp_footer(); ?>
  </body>
</html>

Answer 1

虽然上面提到的具体p已不在您链接的网站上，但有类似的文字，例如h1中的内容。它们是“响应性的”，但是当你有一个巨大的连续词时你就不会注意到它。

例如，您的h1或其他p：

<h1>Hi There..................................................</h1>
<p>;kdsskjdhskjbfjbdsjmdbskjvdbskjbfvjmvbjmvbjvbkvjmbvjbjvnbvfnbvnbvnbvjjbvfjbfvhjlbfvjdbvkjdvbs</p>

在h1元素中There..................................................等于SomeRealyBigWordThatHasNoSpacesSoItTakesUpALotOfSpace。您的示例p元素也是如此。

答案：如果您为填充文字添加间距的实际单词，则会在调整浏览器窗口大小时将其换行。尝试使用Lorem Ipsum text作为占位符副本。

不确定你是否已经使用Bootstrap做到这一点，但在某些时候你可能需要实现Grid。

WordPress内容无法使用Bootstrap自定义主题响应

1 个答案: