页脚不会填满页面的整个宽度

Question

我试图让页脚跨越页面的整个宽度，但由于某种原因，它在左右两侧留下了空白 space。我也无法让我的社交媒体图标在页脚中间居中。我在页面顶部有一个旋转木马，可能会影响页脚，但我不确定

<div class="carousel" data-interval="5000">
<section class="container">
  <div class="row">
    <div class="container">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="item active">
          <img src="download.jpg" alt="Chicago" style="width:100%;">
          </div>
          <div class="item">
          <img src="download.jpg" alt="Chicago" style="width:100%;">
          </div>
          <div class="item">
          <img src="download.jpg"" alt="Chicago" style="width:100%;">
          </div>
          <div class="item">
          <img src="download.jpg" alt="Chicago" style="width:100%;">
          </div>
          <div class="item">
          <img src="download.jpg" alt="Chicago" style="width:100%;">
          </div>
        </div>  
</div>

#footer {
 height: 60px;
 background: grey;
 width: 100%;
 
}

<div class="container">
 <div class="row">
  <footer id="footer"> 
   <a href="https://www.instagram.com/">
    <img class="instagram" src="instagram.png">
   </a>
   <a href="https://twitter.com/">
    <img class="icon" src="twitter.png">
   </a>
   <a href="https://www.facebook.com/">
    <img class="icon" src="facebook.png">
   </a>   
  </footer>
 </div>
</div>

Answer 1

在页脚中使用 container-fluid 而不是 container div

要使图像居中，请在页脚标签上使用 text-center class。

<div class="container-fluid">
    <div class="row">
        <footer id="footer" class="text-center">    
            <a href="https://www.instagram.com/">
                <img class="instagram" src="instagram.png">
            </a>
            <a href="https://twitter.com/">
                <img class="icon" src="twitter.png">
            </a>
            <a href="https://www.facebook.com/">
                <img class="icon" src="facebook.png">
            </a>            
        </footer>
    </div>
</div>

或者另一种方法是不使用容器和行 div 作为页脚。只需使用页脚标签

        <footer id="footer" class="text-center">    
            <a href="https://www.instagram.com/">
                <img class="instagram" src="instagram.png">
            </a>
            <a href="https://twitter.com/">
                <img class="icon" src="twitter.png">
            </a>
            <a href="https://www.facebook.com/">
                <img class="icon" src="facebook.png">
            </a>            
        </footer>

将页脚标记放在 div 部分之外并与之平行。

<div class="carousel" data-interval="5000">
   <section class="container">
      <div class="row">
         <div class="container">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
               <div class="carousel-inner">
                  <div class="item">
                     <img src="download.jpg" alt="Chicago" style="width:100%;">
                  </div>
                  <div class="item active">
                     <img src="download.jpg" alt="Chicago" style="width:100%;">
                  </div>
                  <div class="item">
                     <img src="download.jpg" "="" alt="Chicago" style="width:100%;">
                  </div>
                  <div class="item">
                     <img src="download.jpg" alt="Chicago" style="width:100%;">
                  </div>
                  <div class="item">
                     <img src="download.jpg" alt="Chicago" style="width:100%;">
                  </div>
               </div>
            </div>
            <!-- Left and right controls -->
            <!--  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
               <span class="glyphicon glyphicon-chevron-left"></span>
               <span class="sr-only">Previous</span>
               </a>
               <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 class="container">
         <div class="row">
            <a name="About">
               <h1 class="col-sm-12">About</h1>
            </a>
            <h4 class="col-sm-12">Palacios Beauty Salon was founded filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler</h4>
            <img src="ab-seal-horizontal.png">
         </div>
      </div>
      <hr>
      <div class="container">
         <div class="row">
            <a name="Who We Are">
               <h1 class="col-sm-12">Who We Are</h1>
            </a>
            <div>
               <p class="col-sm-6">3 to 4 sentences about owner/founder of Palacios filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
               <p>
                  <img class="col-sm-6 img" src="blank.png">
               </p>
            </div>
         </div>
      </div>
      <hr>
      <div class="container">
         <div class="row">
            <a name="Services">
               <h1 class="col-sm-12">Services</h1>
            </a>
            <ul>
               <li class="col-sm-4">Manicure        </li>
               <li class="col-sm-4">Pedicure        </li>
               <li class="col-sm-4">Shampoo         </li>
            </ul>
         </div>
      </div>
      <hr>
   </section>
   <div class="container-fluid">
      <div class="row">
         <footer id="footer" class="text-center">   
            <a href="https://www.instagram.com/">
            <img class="instagram" src="instagram.png">
            </a>
            <a href="https://twitter.com/">
            <img class="icon" src="twitter.png">
            </a>
            <a href="https://www.facebook.com/">
            <img class="icon" src="facebook.png">
            </a>            
         </footer>
      </div>
   </div>
</div>

页脚不会填满页面的整个宽度

footer wont fill the full width of the page

html

css

footer

width

carousel