ナビゲーションリンクをナビゲーションバーの右側にフロートさせようとしていますが、機能しません。 「.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フレームワークに慣れていないので、私がばかげた間違いを犯している可能性がありますが、誰かが私を助けてくれることを願っています。:(
親.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>
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
_が機能することに注意してください。
私は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>