Bootstrap Studio: размещение jumbotron в центре страницы - PullRequest
Новая
       54

Bootstrap Studio: размещение jumbotron в центре страницы

0 голосов
/ 27 августа 2018

Так вот что я хочу What I want

И вот что я получаю ... Я попытался добавить строки / столбцы, но они влияют только на движение сверху вниз, раньше я мог размещать столбец / строку слева от jumbotron, но теперь я больше не могу ... Есть ли что-то, что я скучаю со столбцами и строками? enter image description here

Вот мой код: 

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mailsafe</title>
    <link rel="stylesheet" href="bootstrap.min.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bitter:400,700" />
    <link rel="stylesheet" href="Header-Dark.css" />
    <link rel="stylesheet" href="styles.css" />
</head>

<body id="hero" style="background-color:#004878;">
    <section class="d-flex mse spacer" id="hero">
        <div id="hero-top"></div>
        <div id="hero-bottom"></div>
    </section>
    <div>
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class="jumbotron flex-grow-0 flex-shrink-1" id="gateway">
                        <h1 class="text-center">Company Name</h1>
                        <p class="text-center"><br />Company blah blah<br />company blah blah blah.<br /><br /></p>
                        <p class="text-center"><a class="btn btn-primary" href="#" style="  width:673px;
">Get Started →</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

1 Ответ

0 голосов
/ 27 августа 2018

Добавление 100% высоты к телу и html и d-flex h-100 align-items-center классам в div обертывания контейнера.Кроме того, удалите ширину из ящика «Начало работы» и добавьте в него блок отображения.

html,
body {
  height: 100%;
  margin: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<body id="hero" style="background-color:#004878;">
  <section class="d-flex mse spacer" id="hero">
    <div id="hero-top"></div>
    <div id="hero-bottom"></div>
  </section>
  <div class="d-flex h-100 align-items-center">
    <div class="container">
      <div class="row">
        <div class="col">
          <div class="jumbotron flex-grow-0 flex-shrink-1" id="gateway">
            <h1 class="text-center">Company Name</h1>
            <p class="text-center"><br />Company blah blah<br />company blah blah blah.<br /><br /></p>
            <p class="text-center"><a class="btn btn-primary" href="#" style="display:block;">Get Started →</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
...