web-dev-qa-db-ja.com

CSS float-rightがBootstrap 4 Navbarで機能しない

ナビゲーションリンクをナビゲーションバーの右側にフロートさせようとしていますが、機能しません。 「.float-right」、「float-xs-right」、「justify-content-end」を使用してみましたbootstrap 4クラス、「float：right！重要; "私のCSSファイルで、それはまだ動作しません。

これが私のウェブサイトのナビゲーションバーのHTMLです。

<div id="navbar" class="navbar navbar-fixed-top">
    <div class="container">
        <div class="row">
            <div class="navbar-brand">
                <img src="images/logo.png" width="88px">
                Scervino Lawn Service
            </div>
            <ul class="nav justify-content-end">
                <li class="nav-item">
                    <a class="nav-link" href="home">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about">About Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="contact">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</div>

そしてここにCSSがあります：

#navbar {
    box-shadow: 0px 0px 11px #000;
    padding: 0;
}

#navbar .navbar-brand {
    font-size: 1.6em;
    font-weight: bold;
    color: #9CCC58;
}

私はBootstrap 4フレームワークに慣れていないので、私がばかげた間違いを犯している可能性がありますが、誰かが私を助けてくれることを願っています。:(

htmlcsstwitter-bootstrapbootstrap-4navbar
6
Jake Scervino

親.justify-content-betweenで.rowを使用して、フレックスの子を行の端に移動できます。

#navbar {
    box-shadow: 0px 0px 11px #000;
    padding: 0;
}

#navbar .navbar-brand {
    font-size: 1.6em;
    font-weight: bold;
    color: #9CCC58;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="navbar" class="navbar navbar-fixed-top">
    <div class="container">
        <div class="row justify-content-between">
            <div class="navbar-brand">
                <img src="images/logo.png" width="88px">
                Scervino Lawn Service
            </div>
            <ul class="nav justify-content-end">
                <li class="nav-item">
                    <a class="nav-link" href="home">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about">About Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="contact">Contact</a>
                </li>
            </ul>
        </div>
    </div>
6
Michael Coker

2018年更新-Bootstrap 4.0.0

元の答えは、Bootstrap 4.0.0では機能しません。navbarコンポーネントでBootstrapの_.row_を使用することはお勧めしません。_.row_は、グリッド列。

Bootstrap 4はflexboxです。ナビゲーションバーコンポーネントを整列する1つの方法は、_ml-auto_などの auto-marginユーティリティクラス を使用することです）これは、CSS _margin-left:auto_のショートカットです。これを使用して、navを右にプッシュできます...

https://www.codeply.com/go/ZAGhCX5lpq

_<div id="navbar" class="navbar navbar-expand navbar-fixed-top">
    <div class="container">
        <div class="navbar-brand">
            <img src=".." width="88px">
             Scervino Lawn Service
        </div>
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link" href="home">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="services">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="about">About Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="contact">Contact</a>
            </li>
        </ul>
    </div>
</div>
_

または、_justify-content-between_のような flexbox utils をナビゲーションバー内のcontainerで使用できます...

_<div id="navbar" class="navbar navbar-expand navbar-fixed-top">
    <div class="container justify-content-between">
        <div class="navbar-brand">
            <img src=".." width="88px">
             Scervino Lawn Service
        </div>
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link" href="home">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="services">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="about">About Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="contact">Contact</a>
            </li>
        </ul>
    </div>
</div>
_

この場合、2つのナビゲーションバーコンポーネント（navbar-brandおよびnav）しかないため、_justify-content-between_が機能することに注意してください。

5
Zim

私はBootstrap 4.0.0 Alpha 6で試してみましたが、動作します。例は次のとおりです： https://repl.it/JwMq/

私はこれを追加しました：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"/>

そして追加の</div>

1
DarkCeptor44