Question

在移动设备和平板电脑视图中，浮动li元素是正确的，但是在桌面视图中，我希望顺序为：

福音-更多

CSS和HTML：

    /* xs: Extra Small Devices, Phones */
    @media (min-width: 480px) and (max-width: 767px) {
    /* This code centers the top navbar items when it's collapsed.  Whether they are stacked vertically or horizontally.  Use for whenever the hamburger button appears. */
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
    }
    .navbar .navbar-collapse {
        text-align: center;
    }
    }    
        .navbar-brand {
        font-size: 17px;
}




.navbar-header {
        position: relative;
}
/* Adds light hover color with opacity to navbar menu items */
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
        background-color: rgba(241, 241, 241, 0.37);
        color: #999;
    }
.navbar-default .navbar-nav > .active > a {
        background-color: rgba(231, 231, 231, 0.333);
}
.navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
        background-color: rgba(231, 231, 231, 0.57);
}
.topnav {
  font-size: 17px;
}
/*!
 This code makes the navbar work without javascript.
 */
    #navbar-toggle-cbox:checked ~ .collapse {
        display: block;
    }
    #navbar-toggle-cbox {
        display: none;
    }
    .footer {
        border-top: 1px solid #e7e7e7;
    }

    .navbar {
        background-image: url(navbar.png);
    }

    .navbar-static-top {
      border-bottom: 1px solid #e7e7e7;
    }
    .navbar-collapse .collapse .center {
        height: 50px;  
    }



    .nav > li.print-li {
        display: table;
    }
    @media (min-width: 768px) {
    .navbar-nav > li {
        margin-top: -1px;
    }
    .navbar-nav > li.moveup-floatright {
        float: right;
        margin-top: -48px;
        margin-left: auto;
        margin-right: auto;
    }
    .navbar-nav > li.print-li {
      margin-bottom: -2px;
      text-align: center;
      float: none;
      position: relative;
      margin-left: auto;
      margin-right: auto;
    }
    .navbar-nav > li.more-li {
      margin-right: -15px;
    }
    .navbar-nav > li > a {
      border-left: 1px solid #ececec;
    }
    .navbar-nav > li.print-li > a {
      display: inline-block;
      border-right: 1px solid #ececec;
    }
    .navbar-nav > li.more-li > a {
      border-right: 1px solid #ececec;
    }
    #navbar > .topnav {
      width: 100vw;
      margin-top: -49px;
    }
    .center-brand-fix {
      padding-left: 0;
    }
    .topnav {
      padding-left: 15px;
      padding-right: 15px;
    }
    .navbar-header {
      padding-left: 15px;
    }
    }

/* This makes the navbar menu open by default and hides the hamburger icon */   
    .navbar-header > label {
        display: none;
    }

    @media (min-width: 1px) and (max-width: 767px) {
    #top-cell > nav > .navbar > .container > #navbar {
        display: inline-table;
        float: none; 
    }
    /* This code makes the footer have centered items.  It does this because by calling all divs that must have both .navbar and .center, or by calling all divs with .navbar-inner.  */
    .navbar.center .navbar-inner {
        text-align: center;
    }
    .navbar.center .navbar-inner .nav {
        float: none;
        display:inline-block;
        vertical-align: top;
    }
    }
    /* Custom: For iPhone retina */
    @media (min-width: 320px) and (max-width: 479px) {
    /* This code centers the top navbar items when it's collapsed.  Whether they are stacked vertically or horizontally.  Use for whenever the hamburger button appears. */
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
    }
    .navbar .navbar-collapse {
        text-align: center;
    }
    }
     /* Custom: For smallest screen size */
     @media (min-width: 1px) and (max-width: 316px) {
 
    /* This code centers the top navbar items when it's collapsed.  Whether they are stacked vertically or horizontally.  Use for whenever the hamburger button appears. */
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
    }
    .navbar .navbar-collapse {
        text-align: center;
    }
    /* On small screen widths, the bullet verses are pushed too far to the right, it looks tacky and out of place. */
    a.navbar-brand {
    border-bottom: 1px solid #ccc;
    width: 255px;
    }
    .nav > li.print-li {
    display: block;
    }
    .nav > li {
    display: block;
    border-right: 1px solid #ececec;
    border-left: 1px solid #ececec;
    }
    .navbar-collapse {
      border-top: none;
    }
    }


    /* Center Brand */
    @media (min-width: 1px) and (max-width: 767px) {
    .navbar .navbar-brand,
    .navbar-collapse {
        float: none;
        display: inline-block;
        *display: inline; /* ie7 fix */
        *zoom: 1; /* hasLayout ie7 trigger */
        vertical-align: top;
    }
    .center-brand-fix {
        text-align: center;
        margin-left: 0;
    }
    }
    @media (max-width: 979px) {
        .navbar,
        .navbar-collapse {
            display: block;
        }
    }
    /* Custom: TOP HEADER Navbar dropdown fix for phones */
    @media (min-width: 317px) and (max-width: 767px) {
    /* making float:left for .navbar-nav and .navbar-nav > li and adding a margin of 0 makes the header drop down menu not turn into a vertical stack */
    .navbar-nav.topnav {
    float: left;
    margin: 0;
    }
    .navbar-nav.topnav > li {
    float: left;
    }
    .navbar-nav.topnav > li.more-li {
    float: right;
    }
    .navbar-nav.topnav > li.thegospel-li {
    float: left;
    }

      /* Adds border to navbar items */
     .navbar-nav > li.print-li > a {
      display: inline-block;
      border-right: 1px solid #ececec;
    }
    .navbar-nav > li.more-li > a {
      border-left: 1px solid #ececec;
    }

    }
    /* These two things prevent the navbar from bleeding extra space below */
    #navbar {
        max-height:50px;
    }
    .navbar-collapse.in {
      overflow-y: hidden;
    }
    
    /* Deleting this code makes the navbar smaller but messes up the footer.  Consider adding this only to navbar if you want or only footer.  */
    .navbar-nav > li > a {
      padding-top: 15px;
      padding-bottom: 15px;
    }
    }
    /* This makes the navbar menu CLOSED by default and hides the hamburger icon*/
    @media (min-width: 1px) and (max-width: 354px) {
    .collapse {
      display: none;
    }
    }
    /* This makes the navbar menu open by default and hides the hamburger icon*/
    @media (min-width: 355px) {
    .navbar-header > label {
      display: none;
    }
    }
    }





#top-cell {
    height: 51px;
    display: table-header-group;
}
body, html {
    height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="top-cell">
  <nav>
    <div class="navbar navbar-default navbar-static-top">
      <div class="container center-brand-fix">
        <input id="navbar-toggle-cbox" type="checkbox">

        <div class="navbar-header">
          <label type="button" for="navbar-toggle-cbox" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

            <span class="sr-only">Toggle navigation
            </span>

            <span class="icon-bar">
            </span>

            <span class="icon-bar">
            </span>

            <span class="icon-bar">
            </span>
          </label>
          <a class="navbar-brand" href="https://saving.love">The Good News</a>
        </div>

        <div id="navbar" class="navbar-collapse collapse center">
          <ul class="nav navbar-nav topnav navbar-right">
            <li class="print-li"><a href="https://saving.love/print">Print</a></li>
            <li class="active moveup-floatright thegospel-li"><a href="https://saving.love/">The&nbsp;Gospel</a></li>
            <li class="moveup-floatright more-li"><a href="https://saving.love/pages">More</a></li>
          </ul>
        </div>
        <!--/.nav-collapse -->
      </div>
    </div>
  </nav>
</div>

这里是一个小提琴：https://jsfiddle.net/vf4z3qm0/8

更新

请使用小提琴，Stack Overflow的“ Run Snippet”的最大宽度太小，无法查看桌面视图。

Answer 1

清除id为navbar的div元素中的浮动内容，li的父级添加.clearfix

<div id="navbar" class="navbar-collapse collapse center clearfix">

li元素的重新排列使.navbar-nav > li.moveup-floatright more-li on top of thegospel-li`

仅在台式机上重新排列引导导航栏中的浮动li元素

更新

1 个答案: