问题：

bootstrap 3.4中的中心品牌和导航栏[重复]

裴欣然

2023-03-14

如何在bootstrap中将品牌和导航栏置于中心位置。另外，我如何让导航栏围绕品牌和链接停止，即围绕内容和导航栏，而不是在整个页面上延伸。请看一下这本书

.navbar-default {
  background-color: #395085;
  border-color: #2a3858;
}
.navbar-default .navbar-brand {
  color: #dcdcdc;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #ffffff;
}
.navbar-default .navbar-text {
  color: #dcdcdc;
}
.navbar-default .navbar-nav > li > a {
  color: #dcdcdc;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #ffffff;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
  background-color: #395085;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
  color: #dcdcdc;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
  color: #ffffff;
  background-color: #2a3858;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li.divider {
  background-color: #2a3858;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #ffffff;
  background-color: #2a3858;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #ffffff;
  background-color: #2a3858;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #ffffff;
  background-color: #2a3858;
}
.navbar-default .navbar-toggle {
  border-color: #2a3858;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #2a3858;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #dcdcdc;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #dcdcdc;
}
.navbar-default .navbar-link {
  color: #dcdcdc;
}
.navbar-default .navbar-link:hover {
  color: #ffffff;
}
.navbar-brand {
















	background-size: 1
^% auto;
	background-repeat: no-repeat;
	margin-right: 0px;
	background-clip: padding-box;
}
.container-fluid .row .col-lg-offset-1.col-lg-5 {
	margin-top: 5px;
}



@media (max-width:649px){
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #dcdcdc;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff;
    background-color: #2a3858;
  }
.navbar-toggle {
	color: #FFFFFF;
}

}

#mid_title { 
	font-size: 24px; 
	line-height: 24px; 
	font-weight: 400; 
	color: #fff; 
	margin-bottom: 10px; /* text-shadow: 2px 2px 4px #000 */; 
}

#middle_wrapper {
	

	clear: both;
	
	
	padding: 40px 15px 0; 
	overflow: hidden;
	font-size: 14px;
	color: #f4e9d9;
	background: url(/images/templatemo_middle.jpg) center top;
	
	
}

.col_allw300 { 
	float: left; 
}

.templatemo_text {
	color: #08122a; 
	font-weight: normal; 
	text-decoration: none; 
}

.lower_specs {
	
	background-color: #BFC5CE;
	
}


.sb_news_box { 
	clear: both; 
	margin-bottom: 17px; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Electro-Tech Inc</title>
    <!-- Bootstrap -->
	<link href="css/bootstrap.css" rel="stylesheet">
	<link href="css/etp.css" rel="stylesheet" type="text/css">

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
		  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
  </head>
  <body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span>Menu <span class="glyphicon glyphicon-chevron-down"></span></button>
        <a class="navbar-brand" href="about.html">Electrotech</a></div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="defaultNavbar1">
        <ul class="nav navbar-nav justify-content-center">
          <li><a href="about.html">About Us</a></li>
          <li><a href="industries.html">Industries</a></li>
          <li><a href="products.html">Products</a></li>
          <li><a href="news.html">News</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="contact.html">Contact Us</a></li>
        </ul>
</div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
	<script src="js/jquery-1.11.2.min.js"></script>

	<!-- Include all compiled plugins (below), or include individual files as needed --> 
	<script src="js/bootstrap.js"></script>
  </body>
</html>

CSS我刚加的

共有2个答案

汪建德

2023-03-14

只需在css文件中添加这些规则！

/* added rules */
.navbar .container-fluid {text-align: center;}
.navbar-header, .collapse.navbar-collapse {float: none !important; display: inline-block !important;}

马正初

2023-03-14

将以下内容添加到CSS中：

nav .container-fluid {
  display: flex;
  justify-content: center;
}

类似资料：

居中引导导航栏[重复]

我想创建一个居中的引导导航栏与标志。我是这样看的：我怎样才能做到这一点呢？
响应式引导导航栏中的中心内容

问题内容：我无法将内容集中在引导导航栏中。我正在使用引导程序3。我已经阅读了许多文章，但是所使用的CSS或方法不适用于我的代码！我真的很沮丧，所以这就像我的最后选择。任何帮助，将不胜感激！问题答案：我认为这就是您想要的。您需要从内部导航中删除，以使其居中并使其成为嵌入式块。编辑：如果只希望在不折叠导航时发生此效果，请将其围绕在适当的媒体查询中。
在引导导航栏中居中我的文本[重复]

我正在使用引导创建导航栏，但文本位于左侧。我根本不知道如何让文本位于导航栏的中心，并在不同设备上调整大小和查看站点时保持在那里。我试过绕过浮动：左；使用下面的代码，但我仍然无法理解。这东西很新鲜，如果它直视着我很抱歉。谢谢。
IOS7中的状态栏和导航栏问题

我正在将我的应用程序迁移到iOS 7。为了处理状态栏问题，我添加了以下代码这在正常情况下工作正常。如果我正在更改方向（应用程序仅支持横向方向）或显示任何视图控制器并取消模型视图控制器，则我的视图控制器对齐方式将更改。状态栏再次与我的视图控制器重叠。这段代码根本不起作用。请指导我解决此状态栏问题。案例2：这就是我展示视图控制器的方式裁判：提前谢谢。
将引导导航与中心对齐[重复]

我在Bootstrap3导航方面有问题，我在左边、中间和右边都有一些内容。似乎没有导航中心的选项。 http://jsfiddle.net/29tQt/embedded/result/ 我正试图让标题为“中心”的链接位于页面的中心，我如何才能做到这一点？
导航和侧边栏

导航和侧边栏引用网站文档如果你想在 docs 文件夹中引用另一个文档（或者你通过可选 customDocsPath路径站点配置选项设置的位置），那么你只需要使用你想引用的文档名称。例如，如果你在 doc2.md 中，而你想引用 doc1.md：这里引用了一个 [文档](doc1.md). Docusaurus 目前不支持嵌套文件夹中的文件; 只能是在一个平面文件结构中。我们正在考虑添加

bootstrap 3.4中的中心品牌和导航栏[重复]

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档