个人中心
gpt4 book ai didi

HTML 页边距错误

转载 作者：太空宇宙 更新时间：2023-11-04 08:11:54 25 4
gpt4 key购买 nike

我想更正我网站的边距。我尝试了一切，但到目前为止没有任何效果。 html 代码或我的 CSS 代码可能有问题。
这是我网站的屏幕截图:

screenshot

我添加了一些属性来将导航栏中的文本居中对齐，并且还应用了一些线性渐变。

问题是流体容器有边距错误。

不确定我做错了什么。任何帮助将不胜感激。

提前致谢。

.navbar-defaul {
    color: #CC3333;
    background-color: #CC3333;
}

@font-face {
    font-family: Blanch-Condensed;
    src: url(BLANCH_CONDENSED.otf);
}

@font-face {
    font-family: Hardware-Condensed;
    src: url(DDCHardware-Condensed.otf);
}

.Logo {
    width: 43%;
    height: 43%;
    background-size: auto 100%;
    background-repeat: no-repeat;
    margin: auto;
    display: block;
}

#gradiente1 {
    background: linear-gradient( rgb(0, 171, 235) 20%, rgba(136, 222, 255, 1.00) 75%);
}

.nav.navbar-nav li a {
    color: black;
}

.navbar-default {
    margin: auto;
    background: greenyellow;
}

.nav.navbar-nav {
    display: inline-block;
    left: 0;
    right: 0;
    text-align: center;
    width: 100%;
}

.nav.navbar-nav li,
.nav.navbar-nav li a {
    display: inline;
    float: none;
    line-height: 40px;
}

.right.carousel-control {
    background: linear-gradient( rgb(0, 171, 235) 10%, rgba(136, 222, 255, 1.00) 75%);
}

.item.active,
.carousel-inner {
    background: linear-gradient( rgb(0, 171, 235) 10%, rgba(136, 222, 255, 1.00) 75%);
}
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap librerias1 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link rel="stylesheet" href="casadelnino.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- Fin de Bootstrap librerias1 -->
    <title>Casa Del Niño</title>
    <!----jquery script--->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!----jquery script--->
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12" id="gradiente1">
                <img src="imagenes/logo - copia.png" class="Logo">
            </div>
            <div class="row">
                <div class="col-md-12">
                    <nav class="navbar navbar-default">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        <div id="navbar" class="navbar-collapse collapse">
                            <ul class="nav navbar-nav">
                                <li><a href="#">Conozcanos</a></li>
                                <li><a href="#">Derechos y Deberes Del Usuario</a></li>
                                <li><a href="#">Responsabilidad Social</a></li>
                                <li><a href="#">Correo Corporativo</a></li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div id="myCarousel" class="carousel slide" data-ride="carousel">
                        <!-- Indicadores -->
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1"></li>
                            <li data-target="#myCarousel" data-slide-to="2"></li>
                        </ol>
                        <!-- plantilla slider -->
                        <div class="carousel-inner">
                            <div class="item active">
                                <img src="imagenes/20130819180519.jpg" class="img-responsive" alt="Cnino1" style="width: 70%; height: 100%; margin:0 auto;">
                            </div>
                            <div class="item">
                                <img src="imagenes/20130819180556.jpg" class="img-responsive" alt="Cnino2" style="width: 70%; height:100%; margin:0 auto">
                            </div>
                            <div class="item">
                                <img src="imagenes/20130819180644.jpg" class="img-responsive" alt="Cnino3" style="width: 70%;height: 100%; margin:0 auto">
                            </div>
                        </div>
                        <!-- Controles del Slide -->
                        <a class="right carousel-control" href="#myCarousel" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

最佳答案

不要在另一行内添加 .row所以你只需要在添加另一个行之前关闭该行 

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- Bootstrap librerias1 -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
      <link rel="stylesheet" href="casadelnino.css">
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <!-- Fin de Bootstrap librerias1 -->
      <title>Casa Del Niño</title>
      <!----jquery script--->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <!----jquery script--->
   </head>
   <body>
      <div class="container-fluid">
         <div class="row">
            <div class="col-md-12" id="gradiente1">
               <img src="imagenes/logo - copia.png" class="Logo">
            </div>
         </div>
            <div class="row">
               <div class="col-md-12">
                  <nav class="navbar navbar-default">
                     <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        </button>
                     </div>
                     <div id="navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                           <li><a href="#">Conozcanos</a>
                           </li>
                           <li><a href="#">Derechos y Deberes Del Usuario</a>
                           </li>
                           <li><a href="#">Responsabilidad Social</a>
                           </li>
                           <li><a href="#">Correo Corporativo</a>
                           </li>
                        </ul>
                     </div>
                  </nav>
               </div>
            </div>
            <div class="row">
               <div class="col-md-12">
                  <div id="myCarousel" class="carousel slide" data-ride="carousel">
                     <!-- Indicadores -->
                     <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                     </ol>
                     <!-- plantilla slider -->
                     <div class="carousel-inner">
                        <div class="item active">
                           <img src="imagenes/20130819180519.jpg" class="img-responsive" alt="Cnino1" style="width: 70%; height: 100%; margin:0 auto;">
                        </div>
                        <div class="item">
                           <img src="imagenes/20130819180556.jpg"  class="img-responsive" alt="Cnino2" style="width: 70%; height:100%; margin:0 auto">
                        </div>
                        <div class="item">
                           <img src="imagenes/20130819180644.jpg" class="img-responsive" alt="Cnino3" style="width: 70%;height: 100%; margin:0 auto">
                        </div>
                     </div>
                     <!-- Controles del Slide -->
                     <a class="right carousel-control" href="#myCarousel" data-slide="next">
                     <span class="glyphicon glyphicon-chevron-right"></span>
                     <span class="sr-only">Next</span>
                     </a>
                  </div>
               </div>
            </div>
      </div>
   </body>
</html>

关于HTML 页边距错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46210415/

25 4 0
文章推荐： python - 不从列表中删除
文章推荐： python - 为什么我的带连字符的正则表达式不起作用？
文章推荐： c - TCP 套接字接收指示 "unexpected"成功发送后断开连接
文章推荐： python - 使用 Flask 将表单数据保存在 url 中
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com