Bootstrap4ヘッダーがモバイルディスプレイに貼り付けられました

ブートストラップ4（ベータ版）のナビゲーションバーコンポーネントにヘッダーを作成しようとしています。ナビゲーションバーには、ドロップダウンの下にメニューを表示するにはハンバーガーとモバイルで立ち往生している...しかし、私はデスクトップ上だので、私はそれがページBootstrap4ヘッダーがモバイルディスプレイに貼り付けられました

https://v4-alpha.getbootstrap.com/components/navbar/

の上部に通常のナビゲーションバーとして表示したいですここ

はヘッダのみのコードで、私のナビゲーションバーを表示したindex.htmlと同じprobleme

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>test</title> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 


    <script src="https://code.jquery.com/jquery-3.2.1.js" 
     integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" 
     crossorigin="anonymous"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
</head> 
<body> 
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">Navbar</a> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
     <ul class="navbar-nav mr-auto"> 
      <li class="nav-item active"> 
       <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Link</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link disabled" href="#">Disabled</a> 
      </li> 
     </ul> 
     <form class="form-inline my-2 my-lg-0"> 
      <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
     </form> 
    </div> 
</nav>

ブラウザでシンプルなプロジェクトです

誰でも問題が分かりますか？

私はVM上やデスクトップ上でテストしてみたとの両方が同じ問題を持っている... 私の画面の解像度は、ナビゲーションバーの幅は、私は少し迷ってしまいました1920

である1920×1080 です...

出典

2017-09-21 Vince

私はあなたの問題を解決したと考えています。コンソールでnavbarが "flexbox-direction：column"でレンダリングされています。コードを移動してインラインスタイルを追加しました。願い。正確な例が必要な場合は、後でもっと多くのCSS作業が必要です。

は、このことができますスタイルstyle="flex-direction: row"

希望を追加しました。

   <ul class="navbar-nav mr-auto list-inline" style="flex-direction: row"> 
        <li class="nav-item active"> 
         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link" href="#">Link</a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link disabled" href="#">Disabled</a> 
        </li> 
        <form class="form-inline my-2 my-lg-0"> 
         <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
         <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
        </form> 
       </ul> 
       <a class="navbar-brand" href="#">Navbar</a> 

       <div class="collapse navbar-collapse" id="navbarSupportedContent"> 


       </div> 
      </nav>

出典

2017-11-21 10:53:14

問題は、古いものとの新しいスタイルのdoesntのフィットが...ので、私は彼らの新しいウェブサイトへの切り替え...ブートストラップのウェブサイトからのものであったし、それが働いていた彼らの新しいタグとクラスを使用して予想通り – Vince

Bootstrap4ヘッダーがモバイルディスプレイに貼り付けられました

答えて

関連する問題