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

Question

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

<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

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

为了使图像居中，请在页脚标签上使用 text-center 类。

<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        $20</li>
               <li class="col-sm-4">Pedicure        $20</li>
               <li class="col-sm-4">Shampoo         $20</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>