Boostrap菜单格式问题Meteor Js

时间：2015-09-07 18:27:41

标签： html css twitter-bootstrap meteor twitter-bootstrap-3

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

＆＃13;
＆＃13; 
 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;
    }

}
＆＃13;
＆＃13;
＆＃13;

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

以下是截图：

screenshot_1

其他截图

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

1 个答案:

答案 0 :(得分：0)

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

.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>

相关问题
最新问题