Html Bootrstap 4底部导航栏Can'；t删除左右边距_Html_Css_Twitter Bootstrap

Html Bootrstap 4底部导航栏Can'；t删除左右边距

html css twitter-bootstrap

Html Bootrstap 4底部导航栏Can'；t删除左右边距,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,把我的头撞在墙上。。。我不明白为什么我的底部导航栏在左边和右边都有边距。这可能是一些我没有看到的简单的东西，但我已经盯着这个看太久了！请帮忙您可以看到：从这个屏幕截图可以清楚地看到，顶部的导航栏跨越了页面的整个宽度，而底部的导航栏则没有以下是我的html代码部分： <body> <nav class="navbar navbar-expand-sm">  <a class="na

把我的头撞在墙上。。。我不明白为什么我的底部导航栏在左边和右边都有边距。这可能是一些我没有看到的简单的东西，但我已经盯着这个看太久了！请帮忙

您可以看到：从这个屏幕截图可以清楚地看到，顶部的导航栏跨越了页面的整个宽度，而底部的导航栏则没有

以下是我的html代码部分：

 <body>
    <nav class="navbar navbar-expand-sm">

        <!-- Logo -->
        <a class="navbar-brand"><h5 class="brand">Houston Chamber Music Network</h5></a>

        <!-- Navbar links -->
        <ul class="navbar-nav">
            <li class="navbar-item">
                <a class="nav-link active" href="#">HOME</a>
            </li>

            <li class="navbar-item">
                <a class="nav-link" href="#">REGISTER AS COACH</a>
            </li>
            <li class="navbar-item">
                <a class="nav-link" href="#">REGISTER AS MEMBER</a>
            </li>
            <li class="navbar-item">
                <a class="nav-link" href="#">CALENDAR</a>
            </li>
        </ul>

        <!-- Navbar right -->
        <ul class="navbar-nav ml-auto">
            <li class="navbar-item">
                <a class="nav-link" href="#">LOGIN</a>
            </li>
        </ul>
    </nav>

    <!-- main container: -->
    <div class="container-fluid">
        <div class="container-fluid" style="padding-top: 30px">
            <div class="row">
                <div class="col-md-12">
                    <h3>Music is the food of the soul and the spirit.</h3>
                </div>
            </div>
        </div>

        <!-- container for carousel: -->
        <div class="container-fluid" style="padding: 50px">
            <div class="carousel slide" data-ride="carousel">

                <!-- Indicators -->
                <ul class="carousel-indicators">
                    <li data-target="#demo" data-slide-to="0" class="active"></li>
                    <li data-target="#demo" data-slide-to="1"></li>
                    <li data-target="#demo" data-slide-to="2"></li>
                </ul>

                 <!-- The slideshow -->
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="1.jpg" alt="" class="img-fluid">
                        <div class="carousel-caption">
                            <h2>Connect</h2>
                            <h4>with musicians in your area.</h4>
                        </div>
                    </div>
                <div class="carousel-item">
                    <img src="2.jpg" alt="" class="img-fluid">
                    <div class="carousel-caption">
                        <h2>Perform</h2>
                        <h4>with new friends.</h4>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="3.jpg" alt="" class="img-fluid">
                    <div class="carousel-caption">
                        <h2>Learn</h2>
                        <h4>from some of Houston's top professionals.</h4>
                    </div>
                </div>

                <!-- Left and right controls -->
                <!-- <a class="carousel-control-prev" href="#demo" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#demo" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a> -->
            </div>
        </div>
    </div>

    <!-- fixed bottom navbar: -->
    <nav class="navbar navbar-expand-md">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">CONTACT US</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">FAQ</a>
            </li>
        </ul>
    </nav>

</body>

感谢您的帮助。

问题是，除了标题之外的所有内容都在

容器流体

类中，该类添加了

15px

填充。听起来好像你不想让你的导航栏在这个容器的底部；您只是忽略了关闭容器的

（将其放置在容器内部）。这会导致标记无效，并且是问题的原因

要更正此问题，只需在底部的固定导航栏之前添加缺少的

（关闭

.container fluid

类）

.brand{
边缘底部：0px；
}
h5.品牌{
颜色：#e3f2fd；
字体系列：“Arial”；
}
.容器液体{
背景色：#fffef7；
}
navbar先生{
背景色：#2c3b4b；
}
a、 导航链路{
颜色：白色；
}
a、 活跃的{
颜色：#808080；
}
导航栏导航李a:悬停{
颜色：#808080；
}














音乐是灵魂和精神的食粮。





连接
你所在地区的音乐家。
表演
和新朋友在一起。
学习
来自休斯顿的一些顶级专业人士。

问题在于，除了收割台之外的所有东西都在

容器流体

类中，该类流体添加了

15px

填充。听起来好像你不想让你的导航栏在这个容器的底部；您只是忽略了关闭容器的

（将其放置在容器内部）。这会导致标记无效，并且是问题的原因

要更正此问题，只需在底部的固定导航栏之前添加缺少的

（关闭

.container fluid

类）

.brand{
边缘底部：0px；
}
h5.品牌{
颜色：#e3f2fd；
字体系列：“Arial”；
}
.容器液体{
背景色：#fffef7；
}
navbar先生{
背景色：#2c3b4b；
}
a、 导航链路{
颜色：白色；
}
a、 活跃的{
颜色：#808080；
}
导航栏导航李a:悬停{
颜色：#808080；
}














音乐是灵魂和精神的食粮。





连接
你所在地区的音乐家。
表演
和新朋友在一起。
学习
来自休斯顿的一些顶级专业人士。

您必须在页脚

开始之前关闭

您可以在这里查看：

您必须在页脚

开始之前关闭

您可以在这里查看：

.brand {
margin-bottom: 0px;
}

h5.brand {
color: #e3f2fd;
font-family: "Arial";
}

.container-fluid {
background-color: #fffef7;
}

.navbar {
background-color: #2c3b4b;
}

a.nav-link {
color: white;
}

a.active {
color: #808080;
}

.navbar .navbar-nav li a:hover {
color: #808080;
}