Question

我想设计一个菜单栏，左边有一些标签，右边有一个标签。我使用了bootstrap导航栏并向右移动我使用了类navbar-right。在调整窗口大小时，它会转到下一行。但我希望所有菜单栏都在同一行。

<div class="service-list">
            <div class="container-fluid">
                <nav class="col-lg-12 col-md-12 col-sm-12 col-xs-12 navbar service-navbar navbar-default">
                    <div class="navbar-header pl-15">
                        <a class="navbar-brand nav-service-header" id="Accesss">Quick Access</a>
                    </div>
                    <ul class="nav nav-tabs">
                        <li class="dropdown pull-right tabdrop"><a href="#" data-toggle="dropdown" class="dropdown-toggle"><i class="icon-align-justify"></i> <b class="caret"></b></a><ul class="dropdown-menu"><li><a data-toggle="tab" href="#tab9">Section 9</a></li></ul></li>
                        <li class="active"><a data-toggle="" href="#tab1">Section 1</a></li>
                        <li><a data-toggle="tab" href="#tab2">Section 2</a></li>
                        <li><a data-toggle="tab" href="#tab3">Section 3</a></li>
                        <li><a data-toggle="tab" href="#tab4">Section 4</a></li>
                        <li><a data-toggle="tab" href="#tab5">Section 5</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right" id="lastTab">
                        <li class="pull-right tabdrop dropup mt-5">
                            @Html.EJ().DropDownList("KIds_Program_List").Datasource((IEnumerable<EIS.SchoolArc.DataTransferObjects.ServiceProvider.Service>)Model.ServiceList).DropDownListFields(f => f.Text("Name").Value("Id").ID("Class_Program_List")).ShowCheckbox(false).WatermarkText("More")
                        </li>
                    </ul>


                </nav>
            </div>
        </div>

由于

Answer 1

<强> CSS ：

body {
  margin: 0;
  padding: 0;
  background: #ccc;
}

.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  text-align: left;
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding-left: 15px;
  border-bottom: 1px solid #888;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #005f5f;
}

.nav a.active {
  background-color: #aaa;
  color: #444;
  cursor: default;
}

/* drop Menus */
.nav li li {
  font-size: .8em;
}

@media screen and (min-width: 650px) {
  .nav li {
    width: 130px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    display: inline-block;
    margin-right: -4px;
  }

  .nav a {
    border-bottom: none;
  }

  .nav > ul > li {
    text-align: center;
  }

  .nav > ul > li > a {
    padding-left: 0;
  }

  /* Drop Menus */
  .nav li ul {
    position: absolute;
    display: none;
    width: inherit;
  }

  .nav li:hover ul {
    display: block;
  }

  .nav li ul li {
    display: block;
  }
}

<强> HTML ：

 <body>
  <header>
    <div class="nav">
      <ul>
        <li><a href="#">Link1</a></li>
        <li><a href="#">drop1</a>
          <ul>
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
            <li><a href="#">Item3</a></li>
          </ul>
        </li>
        <li><a class="active" href="#">Home</a></li>
        <li><a href="#">Drop2</a>
          <ul>
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
            <li><a href="#">Item3</a></li>
          </ul>
        </li>
        <li><a href="#">Link2</a></li>
      </ul>
    </div>
  </header>
</body>

我希望这就是你要找的东西。

带有类navbar-right的导航栏移动到窗口调整大小的下一行

1 个答案: