0

Надпись Confused Find a Place for a Meeting? должна находится по центру странички,ниже верхней шапки но получается так как на скрине. Использовал Bootstrap 3.введите сюда описание изображенияИспользовал Sass как препроцесор СSS.

.logotip {
  color: #5ED98F;
  font-family: "Archivo Black", sans-serif;
  font-size: 2.2em;
  padding-left: 8%;
  padding-top: 5%;
  height: 650px; }

.header {
  height: 100%;
  background-color: #262F3D; }

.sign_in {
  color: white;
  font-family: "Nunito", sans-serif;
  padding-top: 5%; }

.register {
  color: white;
  font-family: "Nunito", sans-serif;
  border: 1px solid white;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 6px;
  padding-right: 6px;
  text-align: center;
  -webkit-border-radius: 5px;
          border-radius: 5px; }

.regcont {
  padding-top: 5%; }

.confused {
  color: #fff;
  text-align: center;
  font-size: 2.5em;
  font-family: "Archivo Black", sans-serif;
  margin-top: 140px; }
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/libs.min.css">
  <link rel="stylesheet" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
  <title>Document</title>
</head>
<body>

  <div class="header">
  <div class="upperrmenu">
  <span class="logotip col-md-8">Panggon</span>
  <span class="sign_in col-md-1">Sign in</span>
  <div class="regcont col-md-3">
  <span class="register col-md-7">Register your Space</span><br>
  </div>
  </div>
  <span class="confused">Confused Find a Place for a Meeting?</span>
  </div>

  <div class="content">

  </div>
  <div class="footer">

  </div>

<script src="js/libs.min.js" charset="utf-8"></script>
<script src="js/common.js" charset="utf-8"></script>
</body>
</html>

2
  • А чего на спане последнем нет вообще ничего? Раз уже делаете грид систему, то надо на все элементы ее вешать. Попробуйте span обернуть в div class=" col-md-12"
    – alexoander
    10 июл 2017 в 11:23
  • Но надпись одна в строке будет.И почему она позиционируется справа а не слева? 10 июл 2017 в 11:26

1 ответ 1

0

.logotip {
  color: #5ED98F;
  font-family: "Archivo Black", sans-serif;
  font-size: 1.2em;
  padding-left: 8%;
  padding-top: 5%;
  height: 650px;
}

.header {
  height: 100%;
  background-color: #262F3D;
}

.sign_in {
  color: white;
  font-family: "Nunito", sans-serif;
  padding-top: 5%;
}

.register {
  color: white;
  font-family: "Nunito", sans-serif;
  border: 1px solid white;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 6px;
  padding-right: 6px;
  text-align: center;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.regcont {
  padding-top: 5%;
}

.confused {
  color: #fff;
  text-align: center;
  font-size: 1.5em;
  font-family: "Archivo Black", sans-serif;
  margin-top: 140px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/libs.min.css">
  <link rel="stylesheet" href="css/main.css">
  <link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
  <title>Document</title>
</head>

<body>

  <div class="header">
    <div class="upperrmenu">
      <span class="logotip col-md-8">Panggon</span>
      <span class="sign_in col-md-1">Sign in</span>
      <div class="regcont col-md-3">
        <span class="register col-md-7">Register your Space</span><br>
      </div>
    </div>
    <div class="col-md-12 confused">
        <span class="">Confused Find a Place for a Meeting?</span>
    </div>

  </div>

  <div class="content">

  </div>
  <div class="footer">

  </div>

  <script src="js/libs.min.js" charset="utf-8"></script>
  <script src="js/common.js" charset="utf-8"></script>
</body>

</html>

Чуть уменьшил шрифт, чтобы было видно результат. Такой результат ожидался?

2
  • У меня получилось другое.Бекграунд цвет слетел и видно лиш токо логотип. 10 июл 2017 в 19:08
  • Ну я просто взял ваш же пример. Но смысл именно в этом - нужно применять col-*-12 для элементов, которые должны занимать полную длинну относительно родительского элемента.
    – alexoander
    11 июл 2017 в 10:20

Ваш ответ

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

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