Проблема со словами в шапке в bootstrap

229

06 апреля 2018, 14:56

Пробовал использовать разные способы. Даже если и было всё в ряд present past can ,но will улетает вниз. Помогите поставить все слова в ряд. Это с анимацией.

body { 
  margin: 0; 
  background-color: white; 
  text-decoration: none; 
} 
 
nav ul { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
} 
 
.topmenu>li { 
  width: 35%; 
  float: left; 
  position: relative; 
} 
 
.topmenu>li>a { 
  text-transform: uppercase; 
  font-size: 1em; 
  font-weight: bold; 
  color: white; 
  padding: 30px; 
} 
 
.topmenu li a:hover { 
  color: #D5B45B; 
} 
 
.submenu { 
  text-transform: uppercase; 
  background: #273037; 
  position: absolute; 
  z-index: 5; 
  width: 200px; 
  opacity: 0; 
  transform: scaleY(0); 
  transform-origin: 0 0; 
  transition: .5s ease-in-out; 
} 
 
.submenu a { 
  color: white; 
  text-align: left; 
  padding: 15px; 
  font-size: 0.9em; 
} 
 
.submenu li:last-child a { 
  border-bottom: none; 
} 
 
.topmenu>li:hover .submenu { 
  opacity: 1; 
  transform: scaleY(1); 
} 
 
#carousel { 
  padding: 0px; 
} 
 
#bd { 
  font-size: 1.2em; 
} 
 
@media (min-width: 1351px) { 
  #description1 { 
    width: 69%; 
    border: 3px dashed grey; 
    padding: 4%; 
    margin-top: 2%; 
    margin-left: 17%; 
    margin-bottom: 2%; 
  } 
  #onthispage { 
    font-size: 3.5em; 
    font-weight: bold; 
    margin-bottom: 4%; 
  } 
  #text1 { 
    margin-bottom: 4%; 
    font-size: 2.2em; 
    font-weight: bold; 
  } 
  #text2 { 
    width: 103%; 
    height: 3%; 
    font-size: 2.2em; 
    font-weight: bold; 
  } 
} 
 
@media (max-width: 1350px) and (min-width: 1061px) { 
  #description1 { 
    width: 60%; 
    border: 3px dashed grey; 
    padding: 4%; 
    margin-top: 2%; 
    margin-left: 18%; 
    margin-bottom: 2% 
  } 
  #onthispage { 
    font-size: 2.3em; 
    font-weight: bold; 
    margin-bottom: 4%; 
  } 
  #text1 { 
    margin-bottom: 4%; 
    font-size: 1.5em; 
    font-weight: bold; 
  } 
  #text2 { 
    width: 103%; 
    height: 3%; 
    font-size: 1.5em; 
    font-weight: bold; 
  } 
} 
 
@media (max-width: 1060px) and (min-width: 821px) { 
  #description1 { 
    width: 60%; 
    border: 3px dashed grey; 
    padding: 4%; 
    margin-top: 2%; 
    margin-left: 18%; 
    margin-bottom: 2% 
  } 
  #onthispage { 
    font-size: 1.8em; 
    font-weight: bold; 
    margin-bottom: 4%; 
  } 
  #text1 { 
    margin-bottom: 4%; 
    font-size: 1.1em; 
    font-weight: bold; 
  } 
  #text2 { 
    width: 103%; 
    height: 3%; 
    font-size: 1.1em; 
    font-weight: bold; 
  } 
} 
 
@media (max-width: 820px) and (min-width: 720px) { 
  #description1 { 
    width: 70%; 
    border: 3px dashed grey; 
    padding: 4%; 
    margin-top: 2%; 
    margin-left: 15%; 
    margin-bottom: 2% 
  } 
  #onthispage { 
    font-size: 1.5em; 
    font-weight: bold; 
    margin-bottom: 4%; 
  } 
  #text1 { 
    margin-bottom: 4%; 
    font-size: 1em; 
    font-weight: bold; 
  } 
  #text2 { 
    width: 103%; 
    height: 3%; 
    font-size: 1em; 
    font-weight: bold; 
  } 
} 
 
@media (max-width: 719px) and (min-width: 550px) { 
  #description1 { 
    width: 75%; 
    border: 3px dashed grey; 
    padding: 4%; 
    margin-top: 2%; 
    margin-left: 12%; 
    margin-bottom: 2% 
  } 
  #onthispage { 
    font-size: 1.5em; 
    font-weight: bold; 
    margin-bottom: 4%; 
  } 
  #text1 { 
    margin-bottom: 4%; 
    font-size: 1em; 
    font-weight: bold; 
  } 
  #text2 { 
    width: 103%; 
    height: 3%; 
    font-size: 1em; 
    font-weight: bold; 
  } 
} 
 
@media (max-width: 549px) and (min-width: 404px) { 
  #description1 { 
    width: 80%; 
    border: 3px dashed grey; 
    padding: 4%; 
    margin-top: 2%; 
    margin-left: 10%; 
    margin-bottom: 2% 
  } 
  #onthispage { 
    font-size: 1.2em; 
    font-weight: bold; 
    margin-bottom: 4%; 
  } 
  #text1 { 
    margin-bottom: 4%; 
    font-size: 0.8em; 
    font-weight: bold; 
  } 
  #text2 { 
    width: 103%; 
    height: 3%; 
    font-size: 0.8em; 
    font-weight: bold; 
  } 
} 
 
@media (max-width: 403px) { 
  #description1 { 
    width: 90%; 
    border: 3px dashed grey; 
    padding: 4%; 
    margin-top: 2%; 
    margin-left: 5%; 
    margin-bottom: 2% 
  } 
  #onthispage { 
    font-size: 0.9em; 
    font-weight: bold; 
    margin-bottom: 4%; 
  } 
  #text1 { 
    margin-bottom: 4%; 
    font-size: 0.7em; 
    font-weight: bold; 
  } 
  #text2 { 
    width: 103%; 
    height: 3%; 
    font-size: 0.7em; 
    font-weight: bold; 
  } 
} 
 
.color { 
  color: red; 
} 
 
 
/* Footer */ 
 
footer { 
  background-color: #273037; 
  color: white; 
  position: relative; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  text-align: center; 
} 
 
footer p { 
  padding: 10.5px; 
  margin: 0px; 
  line-height: 100%; 
  margin-bottom: 0px; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0, maximum-scale=1.0"> 
  <meta name="keywords" content="learningenglish, learning english, " /> 
  <title>learningenglish.com</title> 
  <link rel="stylesheet" type="text/css" href="homepagefan.css" /> 
  <link href="img/learningenglish" rel="shortcuticon" type="image/x-icon" /> 
 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 
  <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> 
  <script type="text/javascript"></script> 
</head> 
 
<body> 
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
    <a href="#" class="navbar-brand"> 
      <img src="img/english.png" width="80" height="40" alt="logo" title="Home"> 
    </a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportContent" aria-controls="navbarSupportContent" aria-expend="false" aria-label="ToggleNavigation"> 
    <span class="navbar-toggler-icon"></span> 
  </button> 
 
    <div class="collapse navbar-collapse" id="navbarSupportContent"> 
      <ul class="topmenu"> 
        <li><a href="#" class="submenu-link">Present</a> 
          <ul class="submenu"> 
            <li><a href="#">Present simple</a></li> 
            <li><a href="#">Present continuous</a></li> 
            <li><a href="#">Present perfect</a></li> 
          </ul> 
        </li> 
        <li><a href="#" class="submenu-link">Past</a> 
          <ul class="submenu"> 
            <li><a href="#">Past simple</a></li> 
            <li><a href="#">Past continuous</a></li> 
            <li><a href="#">Past perfect</a></li> 
          </ul> 
          <li><a href="#" class="submenu-link">Can, Will</a> 
            <ul class="submenu"> 
              <li><a href="#">Can ,Could</a></li> 
              <li><a href="#">Will, Would</a></li> 
            </ul> 
      </ul> 
    </div> 
  </nav> 
 
  <div class="container-fluid" id="carousel"> 
    <div id="carouselHome" class="carousel slide" data-ride="carousel"> 
      <ol class="carousel-indicators"> 
        <li class="active" data-target="carouselHome" data-slide-to="0"></li> 
        <li class="active" data-target="carouselHome" data-slide-to="2"></li> 
        <li class="active" data-target="carouselHome" data-slide-to="3"></li> 
      </ol> 
      <div class="carousel-inner"> 
        <div class="carousel-item active"> 
          <img src="img/city1.jpg" alt="" class="d-block w-100"> 
        </div> 
        <div class="carousel-item"> 
          <img src="img/city2.jpg" alt="" class="d-block w-100"> 
        </div> 
        <div class="carousel-item"> 
          <img src="img/city3.jpg" alt="" class="d-block w-100"> 
        </div> 
      </div> 
      <a href="#carouselHome" class="carousel-control-prev" role="button" data-slide="prev"> 
        <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
        <span class="sr-only">Previous</span> 
      </a> 
      <a href="#carouselHome" class="carousel-control-next" role="button" data-slide="next"> 
        <span class="carousel-control-next-icon" aria-hidden="true"></span> 
        <span class="sr-only">Next</span> 
      </a> 
    </div> 
  </div> 
 
  <div id="description1"> 
    <p id="onthispage">On this site you can find:</p> 
    <p id="text1"><span class="color">Basic grammar English rules</span> (you can learn the rules that are easy to understand and to learn).</p> 
    <p id="text2"><span class="color">Exercises in English</span> (you can do any exercises for Past, Present and Future).</p> 
  </div> 
 
  <footer> 
    <p>Privacy policy © 2018 All rights reserved.</p> 
  </footer> 
</body> 
 
</html>

Answer 1

Можно попробовать так (внесите правки в свой код):

HTML

<ul class="navbar-nav topmenu">
    <li class="nav-item">
        <a href="#" class="nav-link submenu-link">Present</a>
        <ul class="submenu">
            <li><a href="#">Present simple</a></li>
            <li><a href="#">Present continuous</a></li>
            <li><a href="#">Present perfect</a></li>
        </ul>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link submenu-link">Past</a>
        <ul class="submenu">
            <li><a href="#">Past simple</a></li>
            <li><a href="#">Past continuous</a></li>
            <li><a href="#">Past perfect</a></li>
        </ul>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link submenu-link">Can, Will</a>
        <ul class="submenu">
            <li><a href="#">Can ,Could</a></li>
            <li><a href="#">Will, Would</a></li>
        </ul>
    </li>
</ul>

CSS

.topmenu>li {
    /* width: 35%; */
    /* float: left; */
    position: relative;
}

Почему отказались от стандартного меню navbar который есть в bootstrap v4.0? Там же есть поддержка двухуровневого меню

UPD

По поводу .dropdown-item:hover, .dropdown-item:focus

Сначала подключаете файл стилей bootstrap, потом свои файлы стилей:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/style.css">

В своем файле (в примере выше style.css) пишете, например:

.dropdown-item:hover, .dropdown-item:focus {
    background-color: red;
}

На тесте работает, при наведении или фокусе фон .dropdown-item будет красным. Рекомендую разобраться с каскадированием стилей.

Создание Интернет магазина Ивано-Франковск

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Номера блоков рядом с заголовками

Задача: провести линию от первого заголовка ко второму, от второго к третьему и тд

184

HTML

Как разобрать строку в XSLT преобразовании

Добрый день! Есть XML документ и необходимо произвести его XSLT преобразованииБеда в том, что строка должна быть разобрана по ячейкам таблицы...

195

HTML

Квадратные элементы в css grid

Имеется grid в три колонки

231

HTML

Как делается выбор телефона для звонка? [требует правки]

При клике на кнопку на сайте нужно чтобы был СИСТЕМНО предложен выбор телефона на который человек хочет позвонить (iPhone, андроид, windows phone)

167