Rob*_*boy 7 css web twitter-bootstrap sidenav
如果我有以下内容,链接文本将包装到下一行:
<div class="sidenav" id="site-navbar">
<ul class="nav nav-pills nav-stacked" >
<li><a href="#h0">A very very very very very very very very very long thing</a></li>
但是,如果我添加词缀,文本将保持在同一行并重叠到主内容列上:
<div class="sidenav" id="site-navbar">
<ul class="nav nav-pills nav-stacked" data-spy="affix">
<li><a href="#h0">A very very very very very very very very very long thing</a></li>
有没有办法用css解决这个问题？另外,我可以在不编辑当前CSS的情况下完成.
这是一个演示溢出的小提琴:https: //jsfiddle.net/75nLbwyb/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Example of navbar overflow</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body data-spy="scroll" data-target="#navbar-example">
<div class="row">
<div class="container">
<div class="col-sm-3">
<div class="sidenav" id="navbar-example" data-spy="affix">
<ul class="nav nav-pills nav-stacked" data-offset-top="1">
<li><a href="#headline0">Section 1</a></li>
<li><a href="#headline1">Section 2 - a very very long thing</a></li>
<li><a href="#headline2">Section 3</a></li>
</ul>
</div>
</div>
<div class="col-sm-9">
<div id="headline0">
<h1>Section 1</h1>
</div>
<p>
blah </p>
<div id="headline1">
<h2>Section 2</h2>
</div>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<div id="headline2">
<h2>Section 3</h2>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
<p> blah blah blah blah </p>
</div>
<p>
fddf
</div>
</div>
</div>
</body>您遇到的主要问题是您的.nav容器(拥有.affix该类)会position:fixed在您滚动后立即获得.固定元素将自身定位到浏览器视口,这就是为什么它.col-sm-3从引导程序忽略父容器的宽度(容器宽度的25%)并将文本重叠到右边的原因.
您唯一的解决方案是为类添加宽度值,.affix因此您的导航容器不会破坏布局.到目前为止HTML标记很好!也许您需要对移动样式做一些调整(记住这一点):
.nav.affix {
width: 150px;
background: #fff;
z-index: 1;
/* background and zindex for mobile styles, currently layout breaks */
}
检查引导程序文档的侧栏.他们也为词缀类元素添加了一个宽度!- https://getbootstrap.com/docs/3.3/css/#code
nst*_*com -1
我遇到了同样的问题，并通过为 Affix 元素设置最大宽度来解决它。
在你的情况下：
.nav.affix {
max-width: 145px;
}
https://jsfiddle.net/75nLbwyb/2/