Responsive Mobile Bootstrap Menu，moving content

使用Bootstrap，我建立了一個NAV菜單。該菜單在寬屏幕上正常工作，但當移動摺疊菜單被激活並且您單擊菜單打開它時，類moves_down_with_menu所在行中包含的內容隨菜單向下移動。我希望菜單打開時行不會改變。我只是想讓菜單過去。但是，我也希望它能像其他情況一樣正常工作。Responsive Mobile Bootstrap Menu，moving content

我該如何做到這一點？

http://jsfiddle.net/k98Bn/65/是它在做什麼

編輯的例子：添加不同的部分

<section id='topbar'> 
    <p> A black top bar with a message </p> 
</section> 
<section id='secondsection'> 
<div id="hero" > 
    <div class="jumbotron"> 
      <%= render 'shared/nav/nav_pages' %> 
     <div class="container"> 
      <div class="row moves_down_with_menu"> 
       <div class="col-md-6 col-md-offset-3 marketing"> 
        <h1>Some Title Test for display</h1> 
        <div id="heroform"> 
         <%= render partial: 'shared/get_form', locals: {:get_form => get_form} %> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</section> 
<section id='thirdsection' > 
</section>

來源

2017-01-02 user2012677

你的問題不是很清楚。讓JSFiddle展示問題會有所幫助。 –

請發佈代碼的**最小完整可驗證示例**，以顯示問題。 – vanburen

@RunnyYolk請參閱Jsfiddle – user2012677

所以，您的評論後，我調整了它...希望這更是你要找的...我不得不編輯一些引導類規則。隨着幾個可怕的命名實用類;）

本質上，你只是想包裝在自己的相對定位容器的部分。相對定位的容器內的導航欄將被絕對定位。

導航欄下面的部分也將位於相對容器中，其頂部偏移量與教室中心欄的高度相同。如果你使用像sass這樣的預處理器。將導航高度設爲變量並引用該值，而不是靜態值。這是爲了確保如果您更改導航高度，以下部分會自動調整！

希望這次對你更好！鏈接codepen https://codepen.io/stevebennn/pen/1f445118e4d8dbdec13149c0defd1197

.navbar { 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 0; 
 
    z-index: 1 
 
} 
 

 
.jumbotron { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #00bcd4; 
 
} 
 

 
.relative-container { 
 
    position: relative; 
 
} 
 

 
.margin-nuke { 
 
    margin: 0; 
 
} 
 

 
.content-container { 
 
    top: 50px; /* this is the height of the navbar. you should make it a variable so you know they are always the same :)*/ 
 
    background: #e3e; 
 
    width: 100%; 
 
}

來源

2017-01-02 03:47:44

謝謝，如果我的導航菜單是頂級欄，我同意。但是，它實際上是在另一部分的下面，所以我不知道如何解決這個問題。 – user2012677

所以你正在尋找| jumbotron/hero> nav> content-area |有了這種結構，你不希望導航移動內容區域。正確？ –

我已經更新了上面的示例...讓我知道如果這就是你要找的 –

您可以添加position: absolute到您的導航欄（你最喜歡需要改變你的第一個超大屏幕，以及相關的高度和填充）。

絕對

不要爲元素留出空間。相反，將其定位在相對於其最接近定位祖先（如果有的話）的指定位置或其他相對於初始包含塊的位置。絕對地定位框可以有邊距，並且它們不會與任何其他邊緣摺疊。

請參閱MDN上的Position瞭解更多信息。

範例CSS：

.navbar { 
    background: transparent; 
    position: absolute; 
    width: 100%; 
    z-index: 1500; 
}

或者你可以在Bootstrap類navbar-fixed-top添加到您的導航欄的div（您的導航欄會雖然與頁面滾動。）

.navbar.navbar-inverse { 
 
    background: transparent; 
 
    position: absolute; 
 
    width: 100%; 
 
    z-index: 1500; 
 
} 
 
#hero .jumbotron { 
 
    background: blue; 
 
    height: 325px; 
 
    margin: 0; 
 
} 
 
#hero .jumbotron .marketing { 
 
    padding-top: 50px; 
 
} 
 
#part2 .jumbotron { 
 
    background: red; 
 
    padding: 20px; 
 
    margin: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div id="hero"> 
 
    <div class="jumbotron"> 
 

 
    <div class="navbar navbar-inverse"> 
 
     <div class="container"> 
 

 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">Bootstrap 3.0 Skeleton</a> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse"> 
 
      <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a> 
 
      </li> 
 
      <li><a href="#about">About</a> 
 
      </li> 
 
      <li><a href="#contact">Contact</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="container"> 
 
     <div class="row moves_down_with_menu"> 
 
     <div class="col-md-6 col-md-offset-3 marketing"> 
 
      <h1>Some Title Test for display</h1> 
 
      <div id="heroform"> 
 
      <p> 
 
       This should not move with menu open 
 
      </p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<section id='part2'> 
 
    <div class='jumbotron'> 
 
    <p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
     survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer 
 
     took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset 
 
     sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
 
     industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially 
 
     unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy 
 
     text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five 
 
     centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like 
 
     Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type 
 
     and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing 
 
     Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard 
 
     dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
     It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the 
 
     printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, 
 
     but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker 
 
     including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled 
 
     it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum 
 
     passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text 
 
     ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised 
 
     in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting 
 
     industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into 
 
     electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions 
 
     of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type 
 
     specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more 
 
     recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
 
     when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s 
 
     with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 
     Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic 
 
     typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem 
 
     Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
 
     book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently 
 
     with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </p> 
 
    </div> 
 
</section> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

來源

2017-01-02 03:48:32 vanburen

Responsive Mobile Bootstrap Menu，moving content

回答

相關問題