相关疑难解决方法(0)
Twitter Bootstrap - 阻止页面顶部内容的顶部导航栏
我有这个Twitter Bootstrap代码
<div class='navbar navbar-fixed-top'>
<div class='navbar-inner'>
<div class='container'>
<a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</a>
<div class='nav-collapse'>
<ul class='nav'>
<li class='active'>
<a href='some_url'>My Home</a>
</li>
<li>
<a href='some_url'>Option 1 </a>
</li>
<li>
<a href='some_url'>Another option</a>
</li>
<li>
<a href='some_url'>Another option</a>
</li>
</ul>
</div>
</div>
</div>
</div>
但是当我查看页面的开头时,导航栏会阻止页面顶部附近的一些内容.如果在查看页面顶部时如何降低其余内容,以便内容不会被导航栏阻止,是否有任何想法？
推荐指数
解决办法
查看次数
关于Bootstrap 4 - Navbar"固定顶部"
我正在使用Bootstrap 4,
我有一个关于Navbar"固定顶部"的问题.http://v4-alpha.getbootstrap.com/components/navbar/#placement
Navbar"固定顶部"涵盖了内容,
像下面这个演示,
Navbar的封面<div class="jumbotron">,我希望Navbar不会覆盖它,我该怎么办？
我不知道该怎么做,因为设备大小是可见的.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/tether/1.3.2/css/tether.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success-outline" type="submit">Search</button>
</form>
</nav>
<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, …推荐指数
解决办法
查看次数
Bootstrap - navbar-fixed-top涵盖内容
我有一个关于navbar-fixed-top的问题.好吧,我有一个简单的问题.我的固定导航栏涵盖了内容,例如在"关于我们"页面中,它涵盖了"关于我们"标题的行.
我不知道如何解决它,因为当我调整网站大小(移动设备大小)时,标题是可见的.
当然我在其他页面(Full Width和404)中有标题这种问题.
此外,在索引页面中,它涵盖了一些轮播滑块.
信息:
bootstrap 2.3.2
请告诉我,如何在所有决议中修复它.
推荐指数
解决办法
查看次数
bootstrap navbar菜单重叠文本
即时通讯使用最新版本的bootstrap,当我调整屏幕浏览器的大小时,使用小的切换按钮与页面上的文本重叠,而不是将页面内容向下推.我已多次研究过这个问题.我尝试将填充底部放在导航栏上并在底部填充顶部.我已经尝试了许多其他建议,但没有任何工作.感谢任何帮助.
这是html代码:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar- collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand navbar-brand-left" href="#"><a href="index.html"><img src="somepicture"></a></div>
</div>
<div class="collapse navbar-collapse" id="navbar-brand-centered"">
<ul class="nav navbar-nav">
<li><a href="someurl">Home</a></li>
<li><a href="someurl" id="active2">What's On</a></li>
<li><a href="someurl">About Us</a></li>
<li><a href="someurl">Parties</a></li>
<li><a href="someurl">Gallery</a></li>
<li><a href="someurl">Menu</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Share<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="someurl">Facebook</a></li>
<li><a href="someurl">Twitter</a></li>
</ul>
<li><a href="someurl">Contact Us</a></li>
</ul>
</div><!--/.nav-collapse --> …推荐指数
解决办法
查看次数
Navbar 和 Jumbotron 之间的差距
我正在构建我想你可以为我将要构建的网站调用一个模板，但是我对引导程序仍然很陌生，因此无法确定哪些 CSS 规则正在影响元素等。
我遇到的问题是我无法让 Jumbotron 装置与导航栏底部齐平。我在这里发现了一些关于同一问题的问题，但解决方案不起作用。
这是我的代码
</head>
<body>
<div class="row">
<div>
<img src="http://placehold.it/1600x300" width="100%">
</div>
<!-- Static navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav nav-justified" id="myNav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#contact">Services</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="jumbotron" id="openingtext">
This is where the opening sale text will go
</div>
<div …推荐指数
解决办法
查看次数
动态bootstrap 3导航栏固定顶部重叠内容
我发现其他 问题 是解决类似的问题,但是这是略有不同,如最上面一栏的内容是动态变化的.这意味着我不知道该栏将以哪个屏幕宽度重叠内容.
此CSS使用当前顶部栏文本以标准分辨率工作.我知道我可以在CSS中使用@media(max-width)来调整padding-top,但这并不能解释动态更改顶部栏文本的问题.
body {
min-height: 2000px;
padding-top: 70px;
}
有没有办法检查顶部栏的高度,并在不使用Javascript的情况下为身体添加偏移量？
另一个可能更好的选择是,只要单个行太拥挤,就可以将顶部栏切换到移动视图.有关如何做到这一点的任何想法？
谢谢
https://jsfiddle.net/waspinator/4c2yespy/7/embedded/result/
编辑:用javascript修复https://jsfiddle.net/4c2yespy/8/更新jsfiddle
推荐指数
解决办法
查看次数
Bootstrap 4 固定顶部导航栏显示折叠并隐藏内容
我已经尝试过很多线程对SO，也这一个，但不能把它做。我正在尝试使用 bootstrap 4 在顶部制作一个固定的导航栏。但看起来导航栏正在向顶部移动。我也尝试css按照官方文档的建议添加填充，但内容不是固定的导航栏。这是默认的导航栏图像
这是我得到的固定导航栏图像
我不知道我在这方面缺少什么。这是代码
<nav class="navbar fixed-top navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<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="#/product">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/career">Career</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#/contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
有什么帮助吗？
推荐指数
解决办法
查看次数