Bootstrap 4 alpha 6導航欄在谷歌瀏覽器上無法正確顯示

Question

以下是問題網站的鏈接，該問題僅出現在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 --> 

我試過的東西： 我已經做了一個小提琴並嘗試在我的本地主機上...這段代碼似乎工作，但它與我的主要網站上的代碼相同...所以我不知道爲什麼這不起作用。

Answer 1

只需刪除bodydisplay:flex（當然flex-flow: column;以及）