所以我对 bs4 导航栏有疑问，所以让我们详细解释一下这个问题:
我有一个带有容器的内容框的页面，我想在它上面放置导航栏，我想做这样的事情 
但是当我尝试让它发生时:
这是我的html文件
<title> {{ $title }} </title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.css"/>
<body class="scrollbar-inner">
<div id="particles-js"></div>
@if(!Auth::user())
<script type="text/javascript">
$(window).on('load', function () {
$('#userLogin').modal('show');
});
</script>
@include('modals.login')
@endif
<div class="servername">
{{ $heading }}
</div>
<h1 class="ip" onclick="CopyToClipboard('to-copy')">
<div id="to-copy">{{ $main_ip }} <b class="fa fa-copy"></b></div>
</h1>
<div class="content-box">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
<div class="maincontent-box">
</div>
<div class="sidebar">
@if(Auth::user())
<div class="dropdown userPane">
<button style="color:#000000; width: 111%; background: #D3D3D3" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
<img src="http://cravatar.eu/head/{{ Auth::user()->username}}/128.png" width="32px;"
height="32px;"/> {{ Auth::user()->username }}
</button>
<div class="dropdown-menu" style="width: 111%">
<a class="dropdown-item">
<center>
<img src="http://cravatar.eu/head/{{ Auth::user()->username }}/128.png" width="32px;"
height="32px;"/>
</center>
</a>
<div class="dropdown-item">
<center>
Репутация: <span
class="badge badge-{{ Auth::user()->reputation == 10 ? 'success' : 'danger' }}">{{ Auth::user()->reputation }}
/10</span>
</center>
</div>
<div class="dropdown-item">
<center>В сървъра ли си?: <b>{{ Auth::user()->isLogged == 1 ? 'Да' : 'Не' }}</b></center>
</div>
<hr/>
<a class="dropdown-item" href="{{ url('/account/password') }}">
Смени парола
</a>
<a class="dropdown-item" href="#">
Нотификаций: <span class="badge badge-danger">5</span>
</a>
<a class="dropdown-item" href="#">
ични съобщения: <span class="badge badge-danger">5</span>
</a>
<a class="dropdown-item" href="{{ url('/logout') }}">
<center>Излез</center>
</a>
</div>
</div>
@endif
<div class="side">
<h5 class="boxes-title">Навигация <b class="fa fa-compass"></b></h5>
<div class="card">
<div class="card-body">
<a href="{{ url('/') }}" class="{{ request()->is('/') ? 'active' : '' }}"><b
class="fa fa-home"></b>
Начало</a>
<br>
<a href="{{ url('/shop') }}" class="{{ request()->is('shop') ? 'active' : '' }}"><b
class="fa fa-shopping-cart"></b> Магазин</a>
<br>
<a href="{{ url('/bans') }}" class="{{ request()->is('bans') ? 'active' : '' }}"><b
class="fa fa-gavel"></b> Банлист</a>
<br>
<a href="{{ url('/support') }}" class="{{ request()->is('support') ? 'active' : '' }}"><b
class="fa fa-question"></b> Поддръжка</a>
<br>
<a href="{{ url('/apply') }}" class="{{ request()->is('apply') ? 'active' : '' }}"><b
class="fa fa-file-o"></b> Кандидатури</a>
<br>
<a href="{{ url('/top-voters') }}" class="{{ request()->is('top-voters') ? 'active' : '' }}"><b
class="fa fa-thumbs-up"></b> Топ гласуващи</a>
<br>
</div>
</div>
</div>
<div class="side">
<iframe style="width: 300px;"
src="https://discordapp.com/widget?id=511173991168344069&theme=dark" width="350" height="500"
allowtransparency="true" frameborder="0"></iframe>
</div>
</div>
</div>
<script src="{{ asset('js/particles.min.js') }}"></script>
<script src="{{ asset('js/ptcls.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="{{ asset('js/application.js') }}"></script>
</body>
</html>
我的 CSS 文件:
body {
font-family: 'Oswald', sans-serif;
background: url("https://i.imgur.com/CTT4cRp.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
a {
color: rgba(0, 0, 0, 0.77);
}
a:hover {
color: #ffbd13;
}
.servername {
color: white;
text-align: center;
text-decoration: none;
font-size: 100px;
display: flex;
margin-top: 40px;
justify-content: center;
}
.ip {
color: white;
text-align: center;
text-decoration: none;
font-size: 24px;
margin-bottom: 50px;
justify-content: center;
}
#to-copy:hover {
cursor: pointer;
}
#particles-js {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
top: 0px;
z-index: -1;
left: 0px;
background-image: url('');
background-position: 50% 50%;
background-repeat: no-repeat;
}
.content-box {
border-radius: 25px;
border: 2px solid;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
max-width: 80rem;
margin: 0 auto;
background: white;
margin-bottom: 20rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.active {
color: #ffbd13;
}
.news-box {
background-color: lightgrey;
width: 90%;
padding: 15px;
margin: 30px;
}
.maincontent-box {
background-color: lightgrey;
width: 90%;
padding: 15px;
margin-top: 6.6rem;
margin-left: 30px;
margin-bottom: 30px;
}
.boxes-title {
padding-bottom: 5px;
}
.sidebar {
width: 90%; /*Changed*/
bottom: 520px;
margin: 30px;
}
.side {
padding: 15px;
bottom: 520px;
margin-bottom: 10px;
background-color: lightgrey;
}
@media only screen and (min-width: 768px) {
.sidebar {
width: 30%;
}
.news-box {
width: 100%;
}
.maincontent-box {
width: 100%;
}
.content-box {
flex-direction: row;
}
}
.userPane {
margin-bottom: 30px;
top: 0;
color: white;
right: 0;
width: 80%;
justify-content: center;
}
@media only screen and (min-width: 768px) {
.userPane {
width: 90%;
}
}
伙计们，请帮助我..我试图让它在 30 分钟内成功!谢谢指教!
最佳答案
嗯，也许试试这样的东西:
<div class="content-box">
<div class="navbar_position" >
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
</div>
<div class="maincontent-box">
</div>
风格:
@media only screen and (min-width: 768px) {
.sidebar {
width: 30%;
}
.navbar_position{
position: absolute;
width: 90%;
}
.news-box {
width: 100%;
}
.maincontent-box {
width: 100%;
}
.content-box {
flex-direction: row;
}
}
关于javascript - 在内容框中制作 bs4 导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53288513/