web-dev-qa-db-ja.com

Bootstrap navbar alignは右に揃えたい

ナビゲーションバーを右に揃えようとしています。 .pull-rightクラスを使用する場合、ナビゲーションバーを右に押しすぎています：「グリッドから」。

何が間違っていますか？

コード：

<div class="row">
<div class="span3 top_logo"><img src="images/logo_svart.png" width="177" height="60" alt="BETA Team Performance" /></div>
    <div class="span9">
        <div class="navbar navbar-static-top">
            <div class="navbar-inner">
                <div class="container">
                    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><strong>MENY <i class="icon-chevron-down icon-white"></i></strong>
                    </button>
                    <div class="nav-collapse collapse">
                        <ul class="nav pull-right">
                            <li class="active"><a href="#">Start</a></li>
                            ...
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
twitter-bootstrapnavbar
17
Sickan007

この問題は、bootstrap-responsive.cssでmargin-rightは0に設定されます。

基本的なモックアップを備えたJsfiddle ブラウザで見る

そのため、以下のように適切に見えるようにいくつかの番号を提供する必要があります。

.navbar .nav.pull-right {
     float: right;
    margin-right: 98px; /*set margin this way in your custom styesheet*/
  }

目的の効果を作成するためのhtmlコードは、次の方法で作成できます。

<div class="conatiner">
<div class="row-fluid">
    <div class="span2 top_logo">
        <img width="177" height="60" alt="BETA Team Performance" src="http://placehold.it/177x60">
    </div>
    <div class="span10">
        <div class="navbar navbar-static-top">
            <div class="navbar-inner">
                <div class="container">
                    <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                    <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"
                    type="button"><strong>MENY <i class="icon-chevron-down icon-white"></i></strong>

                    </button>
                    <!-- Everything you want hidden at 940px or less, place within here -->
                    <div class="nav-collapse collapse ">
                        <!-- .nav, .navbar-search, .navbar-form, etc -->
                        <ul class="nav pull-right">
                            <li class="active"><a href="#">Home</a>
                            </li>
                            <li><a href="#">Link</a>
                            </li>
                            <li><a href="#">Link</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
12
Shail

ここに到着してBootstrap vを使用している場合は、含まれている.navbar-rightリスト要素：

<div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav navbar-right">
      <!-- … -->
    </ul>
</div>
52
hyponym

pull-rightクラスのdiv.collapse。それでうまくいくかもしれません。

4
Kristian

doグリッドの外側（言語やソーシャルボタンの選択など）の一番右に何かを引き出したい場合は、単純なクラスを作成して<ul class="nav navbar-nav language">に追加し、次のようにスタイル設定できます。 .language {right:50px;position:absolute;}。 .navbar-brandを左端のロゴとして使用すると非常にうまく機能します（とにかくアートディレクターの目から）。

0
chp7

これは私のために働いた。置くpull-right の中に div.collapseは機能しません-順序付けられていないリストクラスに属している必要があります。

<div class="nav-collapse collapse navbar-responsive-collapse">

 <ul class="nav navbar-nav pull-right">
0
greg

Boostrap 4では、ml-autoを使用してメニューを右に揃えることができます。

<div class="navbar-nav ml-auto">
0
mbadeveloper