使引导导航栏中的文本响应
Make text in Bootsrap navbar responsive
我昨天问了这个问题,关于如何使我的导航栏菜单从水平堆叠到垂直堆叠取决于布局,但现在我注意到,当我使我的文本适合我的大显示器它不工作,当我缩小窗口。有没有一种方法可以让我的文本更具响应性?如果没有,你有其他菜单方法吗?另外,我怎么能中心菜单按钮时水平?
我JSFiddle 我的CSS.menu {
background-color: rgba(0, 0, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
-ms-filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
}
.menutext {
color: #FFFFFF;
font-size: 2em;
white-space: nowrap;
}
.row.text-center > div {
display: inline-block;
float: none;
}
/*-----------------------------------------------------------
Bootstrap Overrides
-----------------------------------------------------------*/
* {
border-radius: 0 !important;
}
.navbar-default {
background-color: rgba(0, 0, 0, 0.5);
color: #FFFFFF;
position: relative;
top: -58px;
padding: 0px;
margin: 0px;
border: 0px;
}
.navbar-default .navbar-nav > .active {
color: #000;
background: #FFFFFF;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:link, .navbar-default .navbar-nav > .active > a:visited {
color: #000;
background: #ffffff;
}
.navbar-default .navbar-brand {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #000000;
background-color: #e4e4e4;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #000000;
background-color: #e4e4e4;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #000000;
border-bottom-color: #000000;
}
.navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #000000;
border-bottom-color: #000000;
}
.navbar-default .navbar-toggle {
border-color: #d65c14;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #e4e4e4;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
/*Style for Bigger Screens*/
@media (min-width: 768px) {
.navbar-default a {
color: white;
}
.navbar-default li a:hover {
color: black;
}
}
/*Style for Smaller Screens*/
@media (max-width: 767px) {
.navbar-default {
top: 0px;
background: #808184;
}
.navbar-default li {
border-bottom: 1px;
border-bottom-style:solid;
border-color:#FFF;
}
}
我HTML <div class="container-fluid">
<div class="row">
<div class="col-sm-12" style="background-color:#FABC41; height: 50px;">BAR</div>
</div>
<div class="row">
<div class="col-sm-12" style="padding:0;">
<img class="img-responsive" src="http://travelandwildlifephotography.com/wp-content/uploads/2014/07/Camping-on-Fraser-Island1.jpg" alt="CLI Engage">
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div>
<ul class="nav navbar-nav">
<li class="active"><a class="menutext" href="Home.html">Home</a>
</li>
<li><a class="menutext" href="AboutUs.html">About Us</a>
</li>
<li class="dropdown"> <a class="dropdown-toggle menutext" data-toggle="dropdown" href="#">Tools<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="menutext" href="#">Child Progres Monitoring</a>
</li>
<li><a class="menutext" href="#">Online Courses</a>
</li>
<li><a class="menutext" href="#">Classroom Observation Tools</a>
</li>
<li><a class="menutext" href="#">Coaching & Collaboration Tools</a>
</li>
<li><a class="menutext" href="#">Activities</a>
</li>
<li><a class="menutext" href="#">Texas Kindergarten Entry Assessment</a>
</li>
</ul>
</li>
<li><a class="menutext" href="#">Parents & Families</a>
</li>
<li><a class="menutext" href="#">Parents & Families</a>
</li>
<li><a class="menutext" href="#">Calendar</a>
</li>
<li><a class="menutext" href="#">Contact Us</a>
</li>
<li><a class="menutext" href="#">Help</a>
</li>
<li><a class="menutext" href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>
</li>
</ul>
</div>
</div>
</nav>
您可以使用视口单元使文本响应。vw, vh, vmin, vmax
。这些是视图宽度,视图高度,视图最小值,视图最大值。这些将根据你的屏幕大小进行缩放。例如:1vw =屏幕宽度的1%。注意,这与旧的浏览器不兼容。
font-size:3.5vmin;
您可以使用媒体查询来设置移动视图中的字体大小
@media screen and (max-width: 480px)
{
body {
font-size: 1.5em;
}
}
和居中对齐按钮,添加这个类-
.nav li a {
text-align: center;
}
相关文章:
- 将高图饼图中的文本居中显示为响应
- 如何在响应视频上垂直居中文本
- Servlet对浏览器上显示的纯文本Javascript的响应
- EventSource 的响应具有非“文本/事件流”的 MIME 类型(“文本/纯文本”)
- 无法获取SOAP请求的响应文本
- Ajax 响应文本
- Jquery函数来验证响应文本
- 调整优雅的文本大小调整解决方案的性能,实现流畅/响应式设计
- Ajax响应文本始终为1
- jQuery UI日期选择器只响应第一个文本框
- 使用Jquery的响应设计引导程序中按钮的不同文本大小(例如LastName、FirstName/FirstName)
- XMLHttpRequest 的响应文本在 Mozilla 中为 null(空白)
- 处理XMLHTTP请求文本响应时出错
- 如何从jquery get方法中获取文本响应
- 如何从ajax文本响应中获得id值
- 我如何发送JSON,但期望纯文本响应与AJAX / JQuery
- 如何使用AJAX使用Dojo获得纯文本响应
- 强制JSONP调用将文本响应转换为JSON
- dojo.xhrGet返回PHP源代码,而不是文本响应
- 使引导导航栏中的文本响应