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

回答

相关问题