Question

我正在构建一个自定义wordpress主题，我正在观看我的伙伴使用bootstrap为页面编写代码。他这样做是为了让它以他的显示器为中心。我相信他正在使用4：3显示器。当我在24英寸宽屏上查看页面时，页面不居中。我做错了什么使页面无法响应任何屏幕尺寸？这是我的页面代码：

<?php get_header(); ?>

<div class="row">

<div class="span1"></div>

<div class="span8" id="container">
<?php the_post(); ?>
<?php the_content(); ?>
</div>

<div class="span2">
<?php get_sidebar();?>
</div>

<div class="span1"></div>

</div>

<?php get_footer(); ?>

这是标题的代码：

<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo('charset'); ?>" />

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />

<center>
<div class="row">
    <div class="span3"></div>

<div class="span6">
<div class="logo">
<h1 id="logo-mathew">Mathew J. Mari</h1>
<h3 id="logo-attorney">Attorney At Law</h3>
</div>
</div>

<div class="span3"></div>

</div>
</center>

我是使用bootstrap的新手，所以也许我使用错误的语法来响应或者我已经遗漏了一些东西？我只是希望它能够在所有显示器上进行响应，使其居中并使用1-8-2-1列布局。任何帮助将不胜感激。

Answer 1

看起来您使用的是较旧版本的Bootstrap。较新的版本可以更容易地使元素居中。

您的代码包含在容器类中使用的元素。 bootstrap的一个更简单的方法，以div为中心。使用新的引导程序，将使用类名如col-md-1，col-md-8等。请务必阅读Bootstraps的网格系统。使响应式设计的生活更轻松

<div class="container">
    <div class="row">
        <div class="col-md-1"></div>
    </div>
    <div class="container">
        <div class="col-md-8">
        <?php the_post(); ?>
        <?php the_content(); ?>
    </div>
    <div class="col-md-2">
        <?php get_sidebar();?>
    </div>
    <div class="col-md-1"></div>
</div>

Answer 2

缺少容器标签必须在行和所有其他标签上使用

使用.container作为响应式固定宽度容器。

...

使用.container-fluid作为全宽容器，跨越视口的整个宽度。

...

Answer 3

首先，您使用的是Bootstrap i.e 2.3的旧版本，而bootstrap已经发布了新的version 3.0，所以请升级它。

现在在你正在使用的版本中，还有另一个css，你需要提供参考，这是为了响应。并为主容器添加.container-fluid。

Answer 4

将Class .col-centered添加到页面包装器div

.col-centered{
       margin:0 auto;
       float : none;
       display:block;
}

它将您的页面置于任何大小的监视器中

为什么我的bootstrap代码没有响应？

4 个答案: