无法将div居中置于另一个Bootstrap之上 [英] Cannot center div above another Bootstrap
本文介绍了无法将div居中置于另一个Bootstrap之上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图居中：
< div style =text-align：center; margin-top：16px ;类= 隐藏-XS >
< div>免费估算< / div>
< div>许可& amp; amp; amp;被保险人＃C98354< / div>
< / div>
我希望它始终位于低于它的div上方。
< div class =collapse navbar-collapseid =navbar-collapse-02>
< ul class =nav navbar-nav navbar-right>
< li>
< a href =＃slider-wrapper>主页< / a>
< / li>
< li>
< a href =＃services>服务< / a>
< / li>
< li>
< a href =＃about>关于我们< / a>
< / li>
< li>
< a href =＃portfolio>意见< / a>
< / li>
< li>
< a href =＃contact>联系人< / a>
< / li>
< / ul>
< / div>
不幸的是，我无法弄清楚如何使它正确地位于div上方。
期望的输出结果将如下所示：
$ p
$ b
< header class =item header margin-top-0 padding-bottom- 70id =header1>
< div class =wrapper>
< div class =container>
< nav class =navbar navbar-default navbar -lg navbar-fixed-toprole =navigation>
< div class =container>
< div class =col-lg-1>
< div class =navbar-header>
< button class =navbar-toggledata-target =＃navbar-collapse-02data-toggle =collapsetype =button>
< span class =sr-only>切换导航< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< / button>
< a class =navbar-brand brandhref =＃>
< img src =images / new-logo-small.png>
< / a>
< div class =hidden-xs>& nbsp;& nbsp;& nbsp;& nbsp;& nbsp; A +评分BBB< / div>
< / div>
< / div>
< div class =col-lg-6>
< div style =padding-top：67px; padding-left：125px; text-align：center; font-size：16pxclass =hidden-md hidden-sm hidden-xs>
< div>
< div>部分地址< / div>
< span class =fa fa-envelope>< / span>< span>& nbsp;< a style =text-decoration：none; color：＃333> @ email.com< / A>&安培; NBSP; |&安培; NBSP;< /跨度>
< span class =fa fa-phone>< / span>< span>& nbsp;（727）876-5309< / span>
< / div>
< / div>
< / div>
< div class =col-lg-5>
<！ - 我希望它保持居于其下面的div上方 - >
< div style =text-align：center; margin-top：16px;类= 隐藏-XS >
< div>免费估算< / div>
< div>许可& amp; amp; amp;被保险人＃C98354< / div>
< / div>
< div class =collapse navbar-collapseid =navbar-collapse-02>
< ul class =nav navbar-nav navbar-right>
< li>
< a href =＃slider-wrapper>主页< / a>
< / li>
< li>
< a href =＃services>服务< / a>
< / li>
< li>
< a href =＃about>关于我们< / a>
< / li>
< li>
< a href =＃portfolio>意见< / a>
< / li>
< li>
< a href =＃contact>联系人< / a>
< / li>
< / ul>
< / div>
< / div>
< / div>
< / nav>
< / div>
< / div>
< / header>
解决方案
我在边距中使用百分比来将navbar和navbarnav居中。我希望这可以帮助你。
< div class =makenavbarcenter>
< div class =hidden-xs headertitle>
< div>免费估算< / div>
< div>许可& amp; amp; amp;被保险人＃C98354< / div>
< / div>
< nav class =navbar navbar-default navbarmain>
< div class =container-fluid>
<！ - 品牌和切换分组以获得更好的移动展示效果 - >
< div class =navbar-header>
< button type =buttonclass =navbar-toggle collapseddata-toggle =collapsedata-target =＃bs-example-navbar-collapse-1aria-expanded =false >
< span class =sr-only>切换导航< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< / button>
< / div>
<！ - 收集导航链接，表单和其他内容以进行切换 - >
< div class =collapse navbar-collapseid =bs-example-navbar-collapse-1>
< ul class =nav navbar-nav makenavbarnavcenter>
< li class =headerlinks>< a href =＃>主页< / a>
< / li>
< li class =headerlinks>< a href =＃>服务< / a>
< / li>
< li class =headerlinks>< a href =＃>关于我们< / a>
< / li>
< li class =headerlinks>< a href =＃>意见< / a>
< / li>
< li class =headerlinks>< a href =＃>联络人< / a>
< / li>
< / ul>
< / div>
<！ - /.navbar-collapse - >
< / div>
<！ - /.container-fluid - >
< / nav>
< / div>
< style type =text / css>
.makenavbarcenter {
margin-left：20％;
保证金率：20％;
}
.navbarmain {
background-color：transparent;
border-color：transparent;
}
.makenavbarnavcenter {
margin-right：20％;
保证金余额：20％
}
.headertitle {
text-align：center;
margin-top：16px;
}
.headerlinks {
padding：0px;
margin：0px;
}
< / style>
I am trying to center:
<div style="text-align:center; margin-top:16px;" class="hidden-xs">
<div>Free Estimates</div>
<div>Licensed & Insured #C98354</div>
</div>
I want it to be centered above the div below it at all times.
<div class="collapse navbar-collapse" id="navbar-collapse-02">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#slider-wrapper">Home</a>
</li>
<li>
<a href="#services">Services</a>
</li>
<li>
<a href="#about">About Us</a>
</li>
<li>
<a href="#portfolio">Ideas</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>
Unfortunately I can't quite figure out how to make it center above the div properly.
Desired output would kinda look like:
Full Header Code for Ref:
<header class="item header margin-top-0 padding-bottom-70" id="header1">
<div class="wrapper">
<div class="container">
<nav class="navbar navbar-default navbar-lg navbar-fixed-top" role="navigation">
<div class="container">
<div class="col-lg-1">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#navbar-collapse-02" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand brand" href="#">
<img src="images/new-logo-small.png">
</a>
<div class="hidden-xs"> A+ Rating BBB</div>
</div>
</div>
<div class="col-lg-6">
<div style="padding-top:67px; padding-left:125px; text-align:center; font-size:16px" class="hidden-md hidden-sm hidden-xs">
<div>
<div>Some Address</div>
<span class="fa fa-envelope"></span><span> <a style="text-decoration:none; color:#333">email@email.com</a> | </span>
<span class="fa fa-phone"></span><span> (727) 876-5309</span>
</div>
</div>
</div>
<div class="col-lg-5">
<!-- I want this to stay centered above the div below it -->
<div style="text-align:center; margin-top:16px;" class="hidden-xs">
<div>Free Estimates</div>
<div>Licensed & Insured #C98354</div>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-02">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#slider-wrapper">Home</a>
</li>
<li>
<a href="#services">Services</a>
</li>
<li>
<a href="#about">About Us</a>
</li>
<li>
<a href="#portfolio">Ideas</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
</header>
解决方案
I use percentage in a margin to center navbar and navbarnav. I hope that this help you.
<div class="makenavbarcenter">
<div class="hidden-xs headertitle">
<div>Free Estimates</div>
<div>Licensed & Insured #C98354</div>
</div>
<nav class="navbar navbar-default navbarmain">
<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="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav makenavbarnavcenter">
<li class="headerlinks"><a href="#">Home</a>
</li>
<li class="headerlinks"><a href="#">Services</a>
</li>
<li class="headerlinks"><a href="#">About Us</a>
</li>
<li class="headerlinks"><a href="#">Ideas</a>
</li>
<li class="headerlinks"><a href="#">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<style type="text/css">
.makenavbarcenter {
margin-left: 20%;
margin-right: 20%;
}
.navbarmain {
background-color: transparent;
border-color: transparent;
}
.makenavbarnavcenter {
margin-right: 20%;
margin-left: 20%
}
.headertitle {
text-align: center;
margin-top: 16px;
}
.headerlinks {
padding: 0px;
margin: 0px;
}
</style>
这篇关于无法将div居中置于另一个Bootstrap之上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
