0

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

введите сюда описание изображения введите сюда описание изображения

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

2
  • Покажите всю картинку, пожалуйста
    – entithat
    20 фев 2018 в 20:33
  • @entithat обновил.
    – dragunov_m
    20 фев 2018 в 20:39

1 ответ 1

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>

2
  • Благодарю! Странно что я сам не додумался до этого, наверное надо пойти поспать. :)
    – dragunov_m
    20 фев 2018 в 20:46
  • @dragunov_m, да, наверняка!)
    – entithat
    20 фев 2018 в 20:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.