Rumah > hujung hadapan web > Tutorial Bootstrap > bootstrap导航栏怎么居中

bootstrap导航栏怎么居中

(*-*)浩
Lepaskan: 2019-07-17 10:31:27
asal
6542 orang telah melayarinya

今天用Bootstrap练习仿站时,发现目标站导航栏的菜单是居中排版方式,而Bootstrap貌似没有导航菜单居中的样式,着实折腾了很久,多次测试终于找到了解决方法。

bootstrap导航栏怎么居中

第一种方法:给div和ul添加如下样式:(推荐学习:Bootstrap视频教程

<div class="navbar-collapse collapse" style="text-align: center;">
  <ul class="nav navbar-nav" style="display: inline-block;float: none;">
    <li class="">
        <a href="#">首页</a>
    </li>
    <li class="">
        <a href="#">加入我们</a>
    </li>
    <li class="">
        <a href="#">联系我们</a>
    </li>
  </ul>
</div>
Salin selepas log masuk

第二种方法:

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li class="">
        <a href="#">首页</a>
    </li>
    <li class="">
        <a href="#">加入我们</a>
    </li>
    <li class="">
        <a href="#">联系我们</a>
    </li>
  </ul>
</div>
Salin selepas log masuk

添加如下样式:

.navbar-nav {
  float: none;
  text-align:center;
}
ul.nav.navbar-nav  li {
    float:none;
    display: inline-block;
    margin: 0em;
}
Salin selepas log masuk

更多Bootstrap相关技术文章,请访问Bootstrap教程栏目进行学习!

Atas ialah kandungan terperinci bootstrap导航栏怎么居中. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan