【问题标题】:Bootstrap container not centered correctly引导容器未正确居中
【发布时间】:2013-12-11 19:01:42
【问题描述】:

我可能犯了一个古怪的错误,但环顾四周后找不到它。

我正在使用 Rachel Baker 的 Bootstrap WP 为摄影师构建网站,但容器 div 似乎没有居中。举个例子——>

这就是我的 html 的样子,例如标题:

<header>
    <div class="container">
        <div class="row">
            <div class="span6">
                <div id="logo">
                    <a href="<?php echo home_url('/'); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>">
                        <img src="<?php echo get_template_directory_uri();?>/assets/img/logo.png" alt="####not for google" />
                    </a>
                </div><!--logo-->
            </div><!--span.logo-->
            <div class="span5 offset1">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <?php wp_nav_menu(
                        array(
                            'menu' => 'main-menu',
                            'container_class' => 'nav-collapse collapse',
                            'menu_class' => 'nav',
                            'fallback_cb' => '',
                            'menu_id' => 'main-menu',
                            'walker' => new Bootstrapwp_Walker_Nav_Menu()
                        )
                    ); ?>
            </div><!--span-->

        </div>
    </div>
</header><!--header-->

我错过了什么? :S

【问题讨论】:

  • 看起来整个网站都偏离了中心...您有工作示例要查看吗?
  • 是否有机会链接到该站点以查看示例?
  • 哎呀,迈克,刚刚想通了。以前的开发人员的过渡脚本中有一个古怪的余量。请随时回答,我会给你重点
  • 对我来说,您似乎缺少侧面垂直侧边栏大小的空间。这个页面有侧边栏吗?另外,对于容器和标题,您的盒子模型是什么样的。检查盒子模型上是否有一些填充或边距。
  • 我正在查看顶部图像。我知道图像中没有可见的侧边栏,但对齐时缺少的实际宽度与侧边栏的大小完全相同,对于大多数浏览器来说大约为 22px 左右。人们倾向于使用 css 来抵消侧边栏可见和不可见时发生的变化。我指的是容器和标题元素上的填充和边距

标签: css wordpress twitter-bootstrap


【解决方案1】:

哎呀,谢谢你们的帮助!

过渡脚本中有杂散的 css,导致这种情况发生。 Farrukh 是对的,我认为之前的开发人员试图解释左侧的某种侧边栏。

【讨论】:

    猜你喜欢
    • 2018-10-02
    • 2018-11-07
    • 2016-05-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-12-28
    • 2013-10-22
    相关资源
    最近更新 更多