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>

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

1 个答案: