引导菜单格式问题 Meteor Js

Question

你好，下午好。我目前正在使用 Meteor Js Stack 构建一个社交网络应用程序，但是我的导航栏在移动设备上的包装遇到了一些问题。我尝试将我的下拉菜单设置为向右拉，但确实如此，但单击下拉菜单时它仍然会换行。

 html { -webkit-text-size-adjust: none; }

.navbar-nav {
	margin:0;
	float:none;
    display:inline-block;
}
.navbar-nav>li {
	float:none;
    display:inline-block;
}
.navbar-nav>li>a {
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar-default{
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    margin-bottom: 250px;
}

.row {
    margin-top:80px;
}

#submitPost {
    width: 500px;
}



@media screen and (max-width: 768px) {

    .row {
        margin-top: 135px;
    }


    #submitPost {
        width: 300px;
    }

}

<nav class="navbar navbar-default">
    <div class="container">
      <ul class="nav navbar-nav">
        <li>
          {{#linkTo route='root'}}
        <span style="font-size:1.7em" class="glyphicon glyphicon-home" aria-hidden="true"></span>
          {{/linkTo}}
        </li>
        <li>
          {{#linkTo route='messages'}}
        <span style="font-size:1.7em" class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
          {{/linkTo}}
        </li>
         <li>
          {{#linkTo route='profile'}}
        <span style="font-size:1.7em" class="glyphicon glyphicon-user" aria-hidden="true"></span>
          {{/linkTo}}
          </li>
          <li class="dropdown">
              <a style="font-size:1.7em" class="glyphicon glyphicon-edit" href="#" data-toggle="dropdown" id="navLogin"></a>
              <div id="submitPost" class="dropdown-menu" style="padding:17px;">

              </div>
          </li>
      </ul>
      <ul style="font-size:1.7em" class="nav navbar-nav navbar-right">
       {{> loginButtons}}
      </ul>
    </div>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col-lg-2"></div>
      <div class="col-lg-8">
        {{> yield}}
      </div>
      <div class="col-lg-2"></div>
    </div>
  </div>

这是截图：

其他截图

https://drive.google.com/file/d/0B2yh3X9W-N9LWEM5VF9FYU9mMlE/view?usp=sharing

Answer 1

这个例子可能会帮助你或给你一些想法。您可以使您的主要链接/图标在所有视口中可见，并为您的表单和下部导航使用内置切换。

.navbar-default.custom-navbar {
  background: #38A6EB;
  border-radius: 0;
  border: none;
}
.custom-navbar ul.navbar-nav li.active > a {
  background: #007CC9;
  color: #fff;
}
.custom-navbar ul.navbar-nav > li > a:hover,
.custom-navbar ul.navbar-nav li.active > a:focus {
  background: #fff;
  color: #007CC9;
}
.custom-navbar ul.navbar-nav > li > a {
  color: #fff;
}
.custom-navbar .navbar-header .navbar-toggle span.glyphicon,
.custom-navbar .navbar-header .navbar-toggle:hover,
.custom-navbar .navbar-header .navbar-toggle:focus {
  font-size: 20px;
  background: none;
}
.custom-navbar .nav-icons {
  margin-top: 18px;
  margin-left: 30px;
}
.custom-navbar .nav-icons span.glyphicon {
  padding-left: 15px;
  padding-right: 15px;
  font-size: 20px
}
.custom-navbar .nav-icons a {
  color: #fff;
}
.custom-navbar #navbar-blog .control-label {
  color: #fff;
}
.btn.btn-blue {
  border-radius: 0;
  background: #007CC9;
  color: #fff;
}
.navbar.nav-lower {
  height: 20px;
  background: #38A6EB;
  border-radius: 0;
  border: none;
  margin-bottom: 0;
}
.navbar.nav-lower .navbar-toggle,
.navbar.nav-lower .navbar-toggle:focus,
.navbar.nav-lower .navbar-toggle:hover {
  border: none;
  background: none;
}
.navbar.nav-lower > li {
  display: inline-block;
  width: 33%;
  text-align: left;
}
.navbar.nav-lower .navbar-brand {
  margin-top: 5px;
  margin-left: 30px;
  color: #fff;
}
@media (max-width: 2500px) {
  .custom-navbar .navbar-header {
    float: none;
  }
  .custom-navbar .navbar-left,
  .custom-navbar .navbar-right {
    float: none !important;
  }
  .custom-navbar .navbar-toggle,
  .custom-navbar .navbar-toggle:hover,
  .custom-navbar .navbar-toggle:focus {
    display: block;
    color: #fff;
    border: none;
    background: none;
  }
  .custom-navbar .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .custom-navbar.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .custom-navbar .navbar-collapse.collapse {
    display: none !important;
  }
  .custom-navbar .navbar-nav {
    float: none !important;
    margin-top: 7.5px;
  }
  .custom-navbar .navbar-nav > li {
    float: none;
  }
  .custom-navbar .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .custom-navbar .collapse.in {
    display: block !important;
  }
  .custom-navbar .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .navbar.nav-lower .navbar-collapse {
    text-align: left;
    background: #38A6EB;
  }
}
.bg-primary {
  padding: 20px;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default custom-navbar" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar"> <span class="sr-only">Toggle navigation</span>
        <span class="glyphicon glyphicon-edit"></span>

      </button>
      <div class="nav-icons">
        <a href="#"> <span class="glyphicon glyphicon-home"></a><a href="#"> <span class="glyphicon glyphicon-envelope"></span>
        </a>
        <a href="#"> <span class="glyphicon glyphicon-user"></span>
        </a>

      </div>
    </div>
    <div class="navbar-collapse collapse" id="bs-navbar">
      <!-- Non-collapsing right-side icons -->
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Profile</a>

        </li>
        <li><a href="#">Account</a>

        </li>
      </ul>
      <form id="navbar-blog" role="search">
        <div class="form-group">
          <label class="control-label" for="title">Title</label>
          <input type="text" name="title" class="form-control">
        </div>
        <div class="form-group">
          <label class="control-label" for="body">Body</label>
          <textarea name="body" class="form-control" rows="10"></textarea>
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-blue">Submit</button>
        </div>
      </form>
    </div>
  </div>
  <!-- /.container-fluid -->
  <nav class="navbar navbar-default nav-lower">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-lower-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="glyphicon glyphicon-chevron-down"></span>

      </button> <a class="navbar-brand" href="#">Brand@website.com</a>

    </div>
    <div class="collapse navbar-collapse" id="bs-lower-nav">
      <ul class="nav navbar-nav">
        <li><a href="#">Link</a>

        </li>
        <li><a href="#">Link</a>

        </li>
        <li><a href="#">Link</a>

        </li>
        <li><a href="#">Link</a>

        </li>
        <li><a href="#">Link</a>

        </li>
        <li><a href="#">Link</a>

        </li>
      </ul>
    </div>
  </nav>
</nav>
<div class="container">
  <div class="bg-primary">Boostrap Mobile</div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the
    printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
    but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
    including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
    it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
    the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in
    the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting
    industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
    typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
    Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the
    printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
    but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
    including versions of Lorem Ipsum.</p>
</div>