个人中心
文章发布
退出
作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont？
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
24
4
如果我有以下内容，链接文本会漂亮地换行到下一行:
<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 的情况下完成吗？
这是一个演示溢出的 fiddle : 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 .固定元素将自己定位到浏览器视口(viewport)，这就是为什么它从 Bootstrap 中忽略父 .col-sm-3 容器的宽度(容器宽度的 25%)并与文本重叠的原因向右。
您唯一的解决方案是将宽度值添加到 .affix 类，这样您的导航容器就不会破坏布局。到目前为止，HTML 标记没问题!也许您需要对移动样式进行一些调整(记住这一点):
.nav.affix {
width: 150px;
background: #fff;
z-index: 1;
/* background and zindex for mobile styles, currently layout breaks */
}
Check the sidebar of the bootstrap documentation. They adding a width to the affix class element too! — https://getbootstrap.com/docs/3.3/css/#code
关于css - 带词缀的 Sidenav - 链接不会换行到下一行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45636949/
24
4
0
在 Vaadin 7.0，显示时JavaBean Table 中的数据与 BeanContainer ，用新数据刷新表的正确方法是什么？ 最佳答案 该表通过监听器监视表项的属性。如果您通过表的 Ite
首先，我使用的是带有 Axis2 1.6.2 的 eclipse，我正在 tomcat 6 上部署我创建的 Web 服务。Web 服务是在 eclipse 中通过自上而下的方法创建的。 我被要求使对我
我已将 Rails 3.1.1 应用程序升级到 Rails 3.1.3，现在，对于每个请求，它仅响应错误数量的参数(3 for 1)。不幸的是，它没有说明错误在哪里，并且应用程序跟踪为空。我认为存在一
我是一名优秀的程序员,十分优秀！