Ссылки и позиционирование Bootstrap

219
22 февраля 2018, 12:20

Подскажите пожалуйста как расположить ссылки в горизонтальное положение как вот тут, при этом нужно сохранить моб. адаптацию.

.footer { 
	background-color: #3b3b3b; 
} 
 
/* logo-footer */ 
 
.logo-img { 
	padding: 15px 0px 15px 0px; 
} 
 
/* end logo-footer */ 
 
/* links */ 
 
.nav-link { 
	color: #fff; 
	text-decoration: none; 
	font-family: 'Lora', serif; 
} 
 
 
/* end links */ 
 
/* social and copy */ 
 
.fa-facebook-f, .fa-twitter, .fa-youtube, .fa-instagram, .fa-vk { 
	color: #fff; 
	padding-right: 20px; 
} 
 
@media screen and (max-width: 767px) { 
	.list-socials { 
		text-align: center; 
	} 
	.copy { 
        text-align: center; 
    } 
} 
 
.list-socials { 
    padding: 27px 0px 10px 0px; 
} 
 
.copy { 
    color: #988060; 
    font-size: 10px; 
    font-family: 'Roboto', serif; 
} 
 
/* end socials and copy */ 
 
/* end footer */
<!doctype html> 
<html lang="en"> 
  <head> 
    <!-- Required meta tags --> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
    <!-- Bootstrap CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 
    <link rel="stylesheet" type="text/css" href="css/main.css"> 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
    <link href="https://fonts.googleapis.com/css?family=Lora|Open+Sans|Roboto" rel="stylesheet"> 
 
 
    <title>Sell Watch</title> 
  </head> 
  <body> 
     
 
 
 
 
 
 
 
 
 
 
 
   <!-- footer --> 
   <div class="footer"> 
    <div class="col-md-12"> 
     <div class="container"> 
      <div class="row"> 
        
       <!-- logo --> 
       <div class="col-md-2"> 
        <div class="logo-img" align="center"> 
         <p>Текст</p> 
        </div> 
       </div> 
        
       <!-- links --> 
       <div class="col-md-6"> 
		<ul class="navbar-nav mr-auto"> 
          <li class="nav-item active"> 
            <a class="nav-link" href="#">Watches</a> 
          </li> 
          <li class="nav-item"> 
            <a class="nav-link" href="#">Accessories</a> 
          </li> 
        </ul> 
        <ul class="navbar-nav mr-auto"> 
          <li class="nav-item"> 
            <a class="nav-link" href="#">Terms &amp; Conditions</a> 
          </li> 
          <li class="nav-item"> 
            <a class="nav-link" href="#">Contacts</a> 
          </li> 
        </ul> 
       </div> 
         
       <!-- socials -->  
       <div class="col-md-4"> 
        <div class="list-socials"> 
         <a href="#"><i class="fa fa-facebook-f" style="font-size:21px;"></i></a> 
         <a href="#"><i class="fa fa-twitter" style="font-size:21px;"></i></a> 
         <a href="#"><i class="fa fa-youtube" style="font-size:21px;"></i></a> 
         <a href="#"><i class="fa fa-instagram" style="font-size:21px;"></i></a> 
         <a href="#"><i class="fa fa-vk" style="font-size:21px;"></i></a> 
        </div> 
        <p class="copy">&copy; 2010-2016 Copyright Swits Time London</p> 
       </div> 
        
      </div> 
     </div> 
    </div> 
   </div> 
 
 
 
 
 
 
 
    <!-- Optional JavaScript --> 
    <!-- jQuery first, then Popper.js, then Bootstrap JS --> 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> 
  </body> 
</html>

Answer 1

Внутри <div class="col-md-6 links"></div> я добавил <div class="row"><div> и разделил четыре ссылки на две колонки по две ссылки.

<!-- links -->
<div class="col-md-6 links">
    <div class="row">
        <div class="col-md-6 text-center text-md-left">
            <!-- Тут ul с двумя ссылками -->
        </div>
        <div class="col-md-6 text-center text-md-left">
            <!-- Тут ul с двумя ссылками -->
        </div>
    </div>
</div>


.footer { 
     background-color: #3b3b3b; 
} 
/* logo-footer */ 
 .logo-img { 
     padding: 15px 0px 15px 0px; 
} 
/* end logo-footer */ 
/* links */ 
 .nav-link { 
     color: #fff; 
     text-decoration: none; 
     font-family: 'Lora', serif; 
} 
/* end links */ 
/* social and copy */ 
 .fa-facebook-f, .fa-twitter, .fa-youtube, .fa-instagram, .fa-vk { 
     color: #fff; 
     padding-right: 20px; 
} 
 @media screen and (max-width: 767px) { 
     .list-socials { 
         text-align: center; 
    } 
     .copy { 
         text-align: center; 
    } 
} 
 .list-socials { 
     padding: 27px 0px 10px 0px; 
} 
 .copy { 
     color: #988060; 
     font-size: 10px; 
     font-family: 'Roboto', serif; 
} 
/* end socials and copy */ 
/* end footer */
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Lora|Open+Sans|Roboto" rel="stylesheet"> 
 
</head> 
 
<body> 
    <!-- footer --> 
    <div class="footer"> 
        <div class="col-md-12"> 
            <div class="container"> 
                <div class="row"> 
 
                    <!-- logo --> 
                    <div class="col-md-2"> 
                        <div class="logo-img" align="center"> 
                            <p>Текст</p> 
                        </div> 
                    </div> 
 
                    <!-- links --> 
                    <div class="col-md-6 links"> 
                        <div class="row"> 
                            <div class="col-md-6 text-center text-md-left"> 
                                <ul class="navbar-nav mr-auto"> 
                                    <li class="nav-item active"> 
                                        <a class="nav-link" href="#">Watches</a> 
                                    </li> 
                                    <li class="nav-item"> 
                                        <a class="nav-link" href="#">Accessories</a> 
                                    </li> 
                                </ul> 
                            </div> 
                            <div class="col-md-6 text-center text-md-left"> 
                                <ul class="navbar-nav mr-auto"> 
                                    <li class="nav-item"> 
                                        <a class="nav-link" href="#">Terms &amp; Conditions</a> 
                                    </li> 
                                    <li class="nav-item"> 
                                        <a class="nav-link" href="#">Contacts</a> 
                                    </li> 
                                </ul> 
                            </div> 
                        </div> 
                    </div> 
 
                    <!-- socials --> 
                    <div class="col-md-4"> 
                        <div class="list-socials"> 
                            <a href="#"><i class="fa fa-facebook-f" style="font-size:21px;"></i></a> 
                            <a href="#"><i class="fa fa-twitter" style="font-size:21px;"></i></a> 
                            <a href="#"><i class="fa fa-youtube" style="font-size:21px;"></i></a> 
                            <a href="#"><i class="fa fa-instagram" style="font-size:21px;"></i></a> 
                            <a href="#"><i class="fa fa-vk" style="font-size:21px;"></i></a> 
                        </div> 
                        <p class="copy">&copy; 2010-2016 Copyright Swits Time London</p> 
                    </div> 
 
                </div> 
            </div> 
        </div> 
    </div> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> 
</body>

READ ALSO
Не загружаются кириллические шрифты
CSS

Не загружаются кириллические шрифты

Добрый деньПодскажите, пожалуйста, в чём может быть проблема

 184
Как сделать ссылку по верх картинки?
CSS

Как сделать ссылку по верх картинки?

Нужно по верх картинки добавить еще несколько ссылок, какЗаголовок добавляется нормально, но как /a>только добавляю ссылку - картинка увеличивается...

 167
CSS flexbox. Можно ли изменить размер изображения?
CSS

CSS flexbox. Можно ли изменить размер изображения?

Все четыре изображения большого размера

 239
Как настроить скролл вниз/вверх ?
CSS

Как настроить скролл вниз/вверх ?

Как сделать следующую реализацию:

 172