Question

我希望我的导航栏中的项目在屏幕宽度上伸展时可以说是笔记本电脑，然后在手机上一个接一个地移动。

另外，我不喜欢我的物品被推到左边，我希望它们在屏幕上的间距相等。

HTML：

<!-- Logo -->
<div class="navbar navbar-default navbar-fixed-top" role="">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.html">
        <img src="assets/images/BridgmanLogo.png" alt="Logo">
      </a>
    </div>
  </div>
</div>
<!-- SLIDER -->
<header class="container-fluid intro-slider">
  <div class="bg-slider-wrapper">
    <div id="bg-slider" class="flexslider bg-slider">
      <ul class="slides">
        <li class="slide slide-1">
          <div class="push-text-slide"></div>
          <section class="home-promo">
            <div class="text-center">
              <h2 class="titlepro">
                <span class="upper">Welcome to</span>
                <span class="middle"><strong>Bridgman IBC Ltd</strong></span>
                <span class="bottom">An Example Tag Line Goes Here</span></h2>
              <a href="" class="btn promo-button"><span class="glyphicon glyphicon-shopping-cart"></span><i></i>Shop</a>
            </div>
          </section>
        </li>
        <li class="slide slide-2">
          <div class="push-text-slide"></div>
          <section class="home-promo">
            <div class="text-center">
              <h2 class="titlepro">
                <span class="upper">Welcome to</span>
                <span class="middle"><strong>Bridgman IBC Ltd</strong></span>
                <span class="bottom">An Example Tag Line Goes Here</span></h2>
              <a href="" class="btn promo-button"><span class="glyphicon glyphicon-shopping-cart"></span><i></i>Shop</a>
            </div>
          </section>
        </li>
        <li class="slide slide-3">
          <div class="push-text-slide"></div>
          <section class="home-promo">
            <div class="text-center">
              <h2 class="titlepro">
                <span class="upper">Welcome to</span>
                <span class="middle"><strong>Bridgman IBC Ltd</strong></span>
                <span class="bottom">An Example Tag Line Goes Here</span></h2>
              <a href="" class="btn promo-button"><span class="glyphicon glyphicon-shopping-cart"></span><i></i>Shop</a>
            </div>
          </section>
        </li>
      </ul>
    </div>
  </div>
</header>
<!-- NAVIGATION BAR -->
<div class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-brand">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span> Home</a>
        </li>
        <li><a href="about.html">About</a>
        </li>
        <li><a href="about.html">Specifying</a>
        </li>
        <li><a href="about.html">Market Sectors</a>
        </li>
        <li><a href="about.html">Shop</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

如果我理解正确，你应该做一些改变：

阅读我添加的CSS。我正在使用flex在菜单中平均拉伸项目。
删除.container div以将导航拉伸到窗口的宽度。
从您不需要的导航中删除.navbar-right课程。

我没有关注移动设备我确定您知道如何仅使用媒体查询在桌面上执行所有这些更改。

.navbar-brand, .navbar-nav, .navbar-nav>li {
  float:none !important;
}

.navbar-nav {
  display:flex;
}

.navbar-nav>li {
  flex: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<!-- NAVIGATION BAR -->
<div class="navbar navbar-default" role="navigation">
  <!--<div class="container">-->
  <div class="navbar-brand">
    <ul class="nav navbar-nav">
      <!--<ul class="nav navbar-nav navbar-right">-->
      <li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span> Home</a>
      </li>
      <li><a href="about.html">About</a>
      </li>
      <li><a href="about.html">Specifying</a>
      </li>
      <li><a href="about.html">Market Sectors</a>
      </li>
      <li><a href="about.html">Shop</a>
      </li>
    </ul>

  </div>
  <!--</div>-->
</div>

http://jsbin.com/wisuyi/edit?html,css

Answer 2

您必须使用媒体查询才能获得自适应视图。

.navbar-brand{
  width:100%;
  display:inline-block;
}
.navbar-brand ul li{
  width:20%; 
  /*Adjust the percent based on 100/number of items (Here it is 5)*/
  min-width:150px;
  /*Keep a minimum width such that the text does not overflow*/
  display:inline-block;
  text-align:center;
}

/*Write media queries for Mobile and tablets*/
@media (max-width: 420px) {
  .navbar-brand ul li{
     width:100%;
   }
}

如何使我的导航栏项目响应地在屏幕上伸展

2 个答案: