Bootstrap 4 alpha 6 导航栏在 google chrome 上显示不正确

Question

这里是问题站点link，问题只出现在google chrome.

https://twocan.co/

问题截图如下：

代码如下：

            <div class="collapse navbar-collapse" id="topBar">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link facebook-link" href="<?php echo $this->config->item('facebook_page'); ?>" target="_new">
                            <i class="fa fa-facebook"></i>
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link linkedin-link" href="<?php echo $this->config->item('linkedin_page'); ?>" target="_new">
                            <i class="fa fa-linkedin"></i>
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link twitter-link" href="<?php echo $this->config->item('twitter_page'); ?>" target="_new">
                            <i class="fa fa-twitter"></i>
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link instagram-link" href="<?php echo $this->config->item('instagram_page'); ?>" target="_new">
                            <i class="fa fa-instagram"></i>
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link wechat-link" href="<?php echo $this->config->item('wechat_page'); ?>" target="_new">
                            <i class="fa fa-wechat"></i>
                        </a>
                    </li>
                </ul>
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <span class="navbar-text">
                            +33 (0)6.95.66.30.58 &nbsp;&nbsp;
                        </span>
                    </li>

                    <!-- language picker -->
                    <div class="dropdown">
                        <a class="nav-link dropdown-toggle" href="#" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-globe"></i>
                            <?php echo $this->lang->line('menu_language'); ?>
                            <b class="caret"></b>
                        </a>
                        <div class="dropdown-menu">
                            <?php foreach ($languages as $language) : ?>
                                <a class="dropdown-item" href="<?php echo base_url('language/switchlang/' . $language->language_string); ?>" aria-labelledby="dropdownMenuLink">
                                    <?php echo $language->native_string; ?>
                                </a>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    <!-- end language picker -->

                </ul>
            </div>
        </div>
    </nav>
    <!-- end top bar -->

    <!-- main navigation -->
    <nav class="navbar navbar-toggleable-md navbar-light">
        <div class="container">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="<?php echo base_url(); ?>">
                <img class="img-fluid" src="<?php echo base_url('public/images/shared/logos/logo-header.png'); ?>" alt="Learn English with twocan.com" />
            </a>

            <div class="collapse navbar-collapse" id="mainNav">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item <?php echo $this->uri->segment(1) == '' ? 'active' : ''; ?>">
                        <a class="nav-link" href="<?php echo base_url(); ?>">
                            <i class="fa fa-home" aria-hidden="true"></i>
                            <?php echo $this->lang->line('menu_home'); ?>
                        </a>
                    </li>
                    <li class="nav-item <?php echo $this->uri->segment(1) == 'courses' ? 'active' : ''; ?>">
                        <a class="nav-link" href="<?php echo base_url('courses'); ?>">
                            <i class="fa fa-certificate"></i>
                            <?php echo $this->lang->line('menu_courses'); ?>
                        </a>
                    </li>
                    <li class="nav-item <?php echo $this->uri->segment(1) == 'method' ? 'active' : ''; ?>">
                        <a class="nav-link" href="<?php echo base_url('method'); ?>">
                            <i class="fa fa-lightbulb-o"></i>
                            <?php echo $this->lang->line('menu_method'); ?>
                        </a>
                    </li>
                </ul>

                <ul class="navbar-nav ml-auto">
                    <?php if ($this->session->userdata('student_id') === null) : ?>
                        <li class="nav-item <?php echo $this->uri->segment(2) == 'login' ? 'active' : ''; ?>">
                            <a class="nav-link" href="<?php echo base_url('account/signin'); ?>">
                                <i class="fa fa-sign-in"></i>
                                <?php echo $this->lang->line('menu_sign_in'); ?>
                            </a>
                        </li>
                        <span class="navbar-text">
                            /
                        </span>
                        <li class="nav-item <?php echo $this->uri->segment(3) == 'free-evaluation' ? 'active' : ''; ?>">
                            <a class="nav-link" href="<?php echo base_url('book/course/free-evaluation'); ?>">
                                <?php echo $this->lang->line('menu_free_evaluation'); ?>
                                <i class="fa fa-check"></i>
                            </a>
                        </li>
                    <?php else : ?>
                        <li class="nav-item">
                            <a class="nav-link" href="<?php echo base_url('account/signout'); ?>">
                                <i class="fa fa-sign-out"></i>
                                <?php echo $this->lang->line('menu_sign_out'); ?>
                            </a>
                        </li>
                        <span class="navbar-text">
                            /
                        </span>
                        <li class="nav-item">
                            <a class="nav-link" href="<?php echo base_url('account/dashboard'); ?>">
                                <?php echo $this->lang->line('menu_dashboard'); ?>
                                <i class="fa fa-tachometer"></i>
                            </a>
                        </li>
                    <?php endif; ?>

                </ul>

            </div>
        </div>
    </nav>
    <!-- end main navigation  -->

我试过的： 我做了一个 fiddle 并在我的本地主机上试过......这段代码似乎可以工作，但它与我的主站点上的代码相同......所以我不知道为什么这不起作用。

Answer 1

只需从 body 中删除 display:flex（当然 flex-flow: column; 也一样）