0

これが私の問題の画像です。

ハンバーガー/メニュー アイコンが次の行に押し下げられているのがわかりますか? メニューボタンとヘッダーテキストを隣り合わせにして、代わりにテキストを次の行に移動したい。タイトル テキストとメニューは、それぞれ左右にフロートされます。

これは明確な問題ではないようです (私は反対のことをしようとしているので)。この場合、空白のプロパティをどのように使用できるか考えられません。

機能する唯一のことは、タイトルに最大幅を設定することですが、一部の画面サイズではレイアウトが台無しになります。

Bootstrap 3に付属するものだけで、これらの要素にカスタムcssはありません

マークアップ (基本的に、新しい Bootstrap 3 ドキュメントから直接取得):

<div class="navbar navbar-default">
    <div class = "navbar-header">
      <a class = "navbar-brand" href="<%= request.protocol + request.host_with_port%>/weather"> Weather </a>

  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>

  </div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
  <form id="search" class="navbar-form navbar-right form-inline" method="get" action="/weather">
    <div class="form-group">
      <input type="text" placeholder="Search for your city or zip" class="form-control" id = "searchbox" name="search">
    </div>
    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"/></button>
  </form>
</div>

`

4

1 に答える 1

0

スティーブン、

目的の結果を得るには、2 つの変更が必要です。

まず、.navbar-brand パディングを 70px または必要な値に設定します。

.navbar-brand {
    padding-right:70px; 
}

次に、.navbar-toggle position:absolute, right:0; を作成します。

.navbar-toggle {
    position:absolute;
    right:0;
    top:0;
}

そして、あなたは完了です！:)。

ここにデモがあります：http://jsfiddle.net/sARaY/

于 2013-09-21T00:10:14.187 に答える