0

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

почему переносится на след строку??если там есть место

*{
	padding:0px;
	margin: 0px;
}
#menu{
	text-decoration:none;
	color:black;
	font-size: 3.5vw;
	margin-top: 1vw;
	font-family: 'Open Sans Condensed';
	height: 7vw;
}
#menu:hover{
	padding-bottom: 1vw;
	padding-top: 1vw;
	transition: padding 0.3s ease-out 0.1s;
}
#cont{
	font-family: 'Open Sans', sans-serif;
	}
<!DOCTYPE html>
<html>
<head>
	<title>Непоседа</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300i" rel="stylesheet">
</head>
<body>
<div>
	<nav class="nav">
  <a href="#" class="navbar-brand"><img src="img/1234.png" width="150vw" height="150vw" alt="logo"></a>
  <a class="nav-link" id="menu" href="#">Главная</a>
  <a class="nav-link" id="menu" href="#">Каталог</a>
  <a class="nav-link" id="menu" href="#">Обратная связь</a>
  <a class="nav-link" id="menu" href="#">Условия доставки</a>
  <a class="nav-link" id="menu" href="#">Корзина</a>
  <a class="nav-link" id="cont">8(900)999-99-99</a> 
  <a class="nav-link mt-10" id="cont">Адрес,адрес</a>
	</nav>	
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Бутстрап

1 ответ 1

0

У вас строка имеет размер наибольшего ее потомка, в данном случае картинки. Следующая строка будет как раз под ней.

UPD.

<div>
  <div class="logo">
    <!--Картинка -->
  </div>
  <div class="right">
    <nav>
      <!-- menu -->
    </nav>
    <div calss="contacts"></div>
  </div>
</div>
7
  • И как мне сделать чтобы строка не относилась к наибольшему потомку? 4 окт 2018 в 20:21
  • Сделать нормальную верстку, разделить на блоки, а не запихивать все в nav. Добавил в Ответ.
    – E_K
    4 окт 2018 в 20:26
  • В офицально документации так написано) 4 окт 2018 в 20:27
  • Может в документации nav используют как контейнер, но вряд ли 3 разных блока по своей логике и контенту будут вложены в него сразу ссылками.
    – E_K
    4 окт 2018 в 20:32
  • Ну дык мне нужен бутстрап чтобы меню адаптивное было 4 окт 2018 в 20:34

Ваш ответ

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

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