2017-09-14 64 views
0

我想糾正我網站的邊距。我嘗試了一切,但目前爲止沒有任何工作可能有一些問題與HTML代碼或我的CSS代碼。
這裏是我的網站的截圖:Html頁邊距錯誤

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>

+0

我不確定我是否完全關注你......問題是你有左右邊距,並且預計沒有邊距? – cwanjt

+0

這是從我的頁面捕獲的 –

回答

-1

我找到了解決辦法,只要關閉一個div和我的CSS代碼添加此!

.col-md-12{ 
padding: 0; 
} 
1

不要另一行 所以你只需要添加一個又一個的

<!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> 
1

不要添加行內的行之前關閉行內添加.row。您錯過了關閉包含徽標的行。請相應更新您的標記。

<div class="row"> 
    <div class="col-md-12" id="gradiente1"> 
     <img src="imagenes/logo - copia.png" class="Logo"> 
    </div> 
</div>