web-dev-qa-db-ja.com

レスポンシブBootstrap 2行のnavbarを作成

レスポンシブBootstrap 3ベースの2行のnavbarを作成しようとしています。ただし、HTMLの構造と折りたたみ機能に問題があります。

以下は、望ましい結果の視覚的な説明です。HTML/ CSSの観点から（可能な限り多くのデフォルトBootstrap機能を使用して）誰かが私を正しい方向に向けることを望んでいました。

基本的にメニューは以下を行うことが望まれます：

  • タブレット/デスクトップデバイスでは、最初の行はロゴと小さなセカンダリリンク（Link1-3）のメニューです。 2行目は、メインリンク（LinkA-E）のあるメインメニューです。

  • モバイルでは、クラシックな折りたたみデザインがロゴとハンバーガーアイコンと共に表示されます。展開されたメニューには、最初にメインリンク（LinkA-E）が表示され、次にセカンダリリンク（Link1-3）が表示されます。

タブレット/デスクトップデバイス：

|----------------------------------------------------------|
|  LOGO/BRAND                         Link1  Link2  Link3  |
|----------------------------------------------------------|
|  LinkA  LinkB  LinkC  LindD  LinkE                       |
|----------------------------------------------------------|

モバイルデバイス（折りたたみ）：

|--------------------------------------|
|  LOGO/BRAND               HAMBURGER  |
|--------------------------------------|

モバイルデバイス（拡張）：

|--------------------------------------|
|  LOGO/BRAND               HAMBURGER  |
|--------------------------------------|
|  LinkA                               |
|  LinkB                               |
|  LinkC                               |
|  LinkD                               |
|  LinkE                               |
|--------------------------------------|
|  Link1                               |
|  Link2                               |
|  Link3                               |
|--------------------------------------|
twitter-bootstraptwitter-bootstrap-3navbar
11
preyz

プロジェクトのhtml/cssがある場合、それを使用してどのように行うべきかを示しますが、このコンテキストではこのHTMLは Bootstrap v3.3.7 の静的navbarの例

実際にアイデアは配置されています<div id="navbar" class="navbar-collapse collapse">下の行<div class="navbar-header">フローティングで幅を100％にした後、<ul class="nav navbar-nav navbar-right"> with margin-top: -50px;

そのメディアクエリを使用すると、moblieデバイスで正しく動作します。

[〜＃〜] html [〜＃〜]

<div class="container-fluid">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Logo/Brand</a>
  </div>
  <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a href="#">LinkA</a></li>
      <li><a href="#">LinkB</a></li>
      <li><a href="#">LinkC</a></li>
      <li><a href="#">LinkD</a></li>
      <li><a href="#">LinkE</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link1</a></li>
      <li><a href="#">Link2</a></li>
      <li><a href="#">Link3</a></li>
    </ul>
  </div><!--/.nav-collapse -->
</div>

[〜＃〜] css [〜＃〜]

.navbar-collapse {
    float: left;
    width: 100%;
    clear: both;
}

@media (min-width: 768px) {
    .navbar-right {
        margin-top: -50px;
    }
}

[〜＃〜] just [〜＃〜]動作したかどうかを教えてください。

11
mohamad faramarzi