三少爷的jian 发表于 2017-9-28 09:05:14

关于bootstrap导航条

      <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>
          <a class="navbar-brand" href="#">Brand</a>
      </div>
bootstrap里的导航条，class="navbar-toggle collapsed"属性，是当屏幕小于768px时，该button出现，但为啥在导航条最右边呢，上面哪个属性控制它在左还是在右呢，还有<a class="navbar-brand" href="#">Brand</a>，为啥<button>先写的，但是button在a的右面

gopythoner 发表于 2017-9-30 10:55:26

你自己去看bootstrap的css是怎么设置的
.navbar-toggle {
    position: relative;
    float: right;

看到了么，这里有个右浮动，知道什么是右浮动么？不知道自己去查啊

虽然我也是刚接触前端，但是这种问题还是挺好理解的，你自己去看看网页的css就明白了

不二如是 发表于 2017-10-1 13:48:06

要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中。

折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。

第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么

第二个是 data-target，指示要切换到哪一个元素。

三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。

这些会切换为 .nav-collapse <div> 中的元素。

而最终默认的toggle样式，在bootstarp中是默认“右浮动”
页: [1]
查看完整版本: 关于bootstrap导航条