нижний колонтитул не заполнит всю ширину страницы - PullRequest
Новая
       32

нижний колонтитул не заполнит всю ширину страницы

0 голосов
/ 10 июня 2018

Я пытаюсь заставить нижний колонтитул охватить всю ширину страницы, но по какой-то причине он оставляет пустое пространство справа и слева.Кроме того, я не могу расположить значки социальных сетей в центре нижнего колонтитула.У меня есть карусель в верхней части страницы, которая может влиять на нижний колонтитул, но я точно не знаю 

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

1 Ответ

0 голосов
/ 10 июня 2018

Используйте container-fluid вместо container в div нижнего колонтитула

И для центрирования изображений используйте класс 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>

Или другой способ неиспользуйте контейнер и строки для нижнего колонтитула.Просто используйте тег нижнего колонтитула 

        <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>
...