html - 网站头列和拉权问题

Question

我正在使用 Bootstrap 3.3.5 开发一个示例。我试图使用网格系统创建标题( Logo +导航+搜索)。我的问题是，如果我没有在导航栏上设置宽度，搜索输入会折叠到第二个屏幕。

我创建了以下 CodePen 来显示问题: http://codepen.io/giancorzo/pen/jbqGJo

正如我所说，我的解决方案是添加以下代码:

nav {
  width: 503px;
}

但这在响应式中效果不佳(我不想为每个断点打补丁)。

有什么想法吗？也许我做错了 HTML。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
header {
  padding: 1%;
}
header h1 {
  margin-top: 0;
}
nav ul {
  list-style: none;
  margin: 0px;
}
nav ul li {
  float: left;
  padding: 0% 2%;
}
nav ul li:last-child {
  padding-right: 0px;
}
nav ul li a {
  line-height: 36px;
  text-decoration: none;
  display: block;
}
nav ul li .separator {
  line-height: 36px;
}
nav .navbar-form {
  margin: 0px;
  padding: 0px;
}
@media (max-width: 768px) {
  nav {
    width: auto;
  }
  header h1 {
    font-size: 30px;
  }
}

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<header>
  <div class="container">
    <div class="row">
      <div class="col-xs-4">
        <h1>Site name</h1>
      </div>
      <div class="col-xs-8">
        <nav class="pull-right">
          <ul class="clearfix">
            <li>
              <a href="#">
                <i class="glyphicon glyphicon-home"></i>
                <span>Noticias</span>
              </a>
            </li>
            <li>
              <a href="#">
                <i class="glyphicon glyphicon-home"></i>
                <span>Enlaces RSS</span>
              </a>
            </li>
            <li class="hidden-xs">
              <div class="separator">|</div>
            </li>
            <li class="hidden-xs">
              <div class="search">
                <form class="navbar-form" role="search">
                  <div class="form-group">
                    <input type="text" class="form-control" placeholder="Ingresa tu búsqueda">
                  </div>
                  <button type="submit" class="btn btn-default">Buscar</button>
                </form>
              </div>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</header>

Answer 1

如果没有别的，这可能会给您一些想法。非常小。

.navbar .navbar-brand {
  font-size: 35px;
  color: #444;
}
.navbar .navbar-toggle .icon-bar {
  background: #444;
}
.navbar .navbar-right .separator {
  margin-top: 12px;
  margin-left: 5px;
}

<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">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#">Site Name</a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <form class="navbar-form navbar-right hidden-xs" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Ingresa tu búsqueda">
        </div>
        <button type="submit" class="btn btn-default">Buscar</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><i class="glyphicon glyphicon-home"></i> Noticias</a>

        </li>
        <li><a href="#"><i class="glyphicon glyphicon-home"></i> Enlaces RSS</a>

        </li>
        <li class="separator hidden-xs">|</li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>