Bootstrap 内联未正确堆叠答案

【问题标题】：Bootstrap inline not stacking correctlyBootstrap 内联未正确堆叠
【发布时间】：2018-04-23 04:18:13
【问题描述】：

我查看了其他引导程序帖子，但我似乎仍然无法弄清楚为什么我的代码不起作用。这就是我所在的地方。非常感谢任何帮助，因为我已经为此工作了几天......

如果我使用网格不应该只是堆叠吗？

   <!-- Your site title as branding in the menu -->
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <?php if ( ! has_custom_logo() ) { ?>

                    <?php if ( is_front_page() && is_home() ) : ?>

                        <h1 class="navbar-brand mb-0"><a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>

                    <?php else : ?>

                        <a class="navbar-brand" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a>

                    <?php endif; ?>


                <?php } else {
                    the_custom_logo();
                } ?>
            </div>
        </div>

<!-- end custom logo -->
        <div class="row">
            <div class="col-md-6">
            <p class="text-right">Call Now</br>
            <a href="tel:636-244-4444">636-244-4444</a></p>
        </div>
    </div>
</div>

【问题讨论】：

您想在一行中设置 Logo 和 Call now 部分吗？
是的。它们相互堆叠......
添加了我的答案。如果您需要更多帮助，请回复
对不起，我正在测试它。那很完美！我迷失在最琐碎的细节上......

标签： html wordpress twitter-bootstrap

【解决方案1】：

您应该将站点徽标和 Call now 部分放在一个 .row 元素中，使其与其他元素内联。如果 2 个部分在 2 个不同的 .row 中，则不能是同一行。

在此处查看有关 Bootstrap 网格的更多信息（因为 Bootstrap 3 文档可以更好地解释您的问题）：https://getbootstrap.com/docs/3.3/css/#grid

<div class="row">
    <div class="col-md-6">
            <?php if ( ! has_custom_logo() ) { ?>

                <?php if ( is_front_page() && is_home() ) : ?>

                    <h1 class="navbar-brand mb-0"><a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>

                <?php else : ?>

                    <a class="navbar-brand" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a>

                <?php endif; ?>


            <?php } else {
                the_custom_logo();
            } ?>
    </div>

    <!-- end custom logo -->
    <div class="col-md-6">
        <p class="text-right">Call Now</br>
        <a href="tel:636-244-4444">636-244-4444</a></p>
    </div>
</div> <!-- end row (one line) here -->

【讨论】：