作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想在导航栏中向用户显示 8 个选项,我希望有 2 行,每行 8 个。我希望所有选项都固定在屏幕底部,并且用户能够看到所有选项始终为 8。
目前,我的第二排隐藏在第一排后面?
.navbar-default {
font-family: "Roboto", sans-serif;
background: #f9f9f9;
margin: 0;
padding: 0;
border-top: none;
text-transform: uppercase;
-webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.08);
-khtml-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.08);
-moz-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.08);
-ms-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.08);
box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.08);
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.navbar-default .navbar-nav > li > a {
margin: 0 20px;
padding: 10px 15px;
font-size: 14px;
text-transform: uppercase;
color: #D13030;
font-weight: 700;
letter-spacing: .02em;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.navbar-default .navbar-nav > li > a:hover {
background-color: #E74C3C;
color: #f9f9f9;
outline: none;
-webkit-transition: background-color 0.15s linear;
-moz-transition: background-color 0.15s linear;
-ms-transition: background-color 0.15s linear;
-o-transition: background-color 0.15s linear;
transition: background-color 0.15s linear;
}
<!-- NAVIGATION BAR -->
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container text-center">
<div class="row">
<a href="about.html">
<div class="col-sm-3" id="about-tab">About</div>
</a>
<a href="specifying.html">
<div class="col-sm-3" id="about-tab">Specifying</div>
</a>
<a href="market-sectors.html">
<div class="col-sm-3" id="about-tab">Market Sectors</div>
</a>
<a href="about.html">
<div class="col-sm-3" id="about-tab">Shop</div>
</a>
</div>
</div>
最佳答案
看到我在您的 navbar
中找不到 8 选项,但是要将它放在页面底部,您可以使用如下代码。将此添加到您的 navbar-default
.navbar-default {
position:fixed;
bottom:0;
}
关于css - 修复了双行导航栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37941793/
我正在尝试用 C++ 编写一个程序,该程序将从一个文本文件读取,然后写入一个文本文件。读取的文本文件将在第一行显示天数 (int),随后在不同行显示三个销售人员的名字和姓氏。然后它将有足够的数据行(双
我试图在下面的代码中为 ng-repeat 中的事件中的每个事件添加第二行( )。但是,它最后只添加了一行,我需要每个新行 (class="info") 位于具有 rel 属性的其他每一行之间。 i
您好,我们有一个看起来像这样的表(称之为表 A)。它包含父数据和子数据的两行。我需要获取如下所示的行,其中包含 item_id 和 Parent_item_id(如果存在)(否则为 item_id)。
我是一名优秀的程序员,十分优秀!