Сетка Bootstrap 4 с перекрывающей кнопкой на столбцах - PullRequest
Новая
       10

Сетка Bootstrap 4 с перекрывающей кнопкой на столбцах

0 голосов
/ 10 декабря 2018

Я пытаюсь настроить сетку сайта в начальной загрузке.Чтобы уточнить конечные результаты, я хочу, чтобы я добавил изображение. конечные результаты

  • У меня есть стандартный загрузчик navbar.(пока нормально)
  • Я хочу, чтобы столбцы заполняли всю высоту.
  • Я хочу, чтобы кнопка «читать дальше» перекрывала столбцы под каждым другим.
  • Субтитры должны быть выровнены по левому краю заголовка.Теперь он центрирован, потому что все содержимое div центрировано.

Проблема высоты столбца

Итак, у меня есть 2 столбца рядом и 1 столбец внизу.Я хочу, чтобы он заполнил высоту до 100%.Итак, скажем, что 2 колонны рядом занимают 80% высоты.(40% нижнего отступа и 40% верхнего) И столбец полной ширины, чтобы заполнить остальную часть высоты.Скажите 10% / 10% верхнего / нижнего отступа.

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

Кнопка перекрытия

В качестве дополнительной головной боли мне нужны 2 кнопки, которые перекрывают 50% с колонкой внизу.Кажется, я не могу заставить это работать.

Код, который я сейчас использую: 

body {
    font-family: Sofia-pro;
}

#header-block-left, #header-block-right {
    text-align: center;
    padding-top: 40%;
    padding-bottom: 40%;
}

#page-scroll-anchor-grey {
    text-align: center;
    padding-top: 10%;
    padding-bottom: 10%;
}

#header-block-right {
    background-color: #dcdbd7;
}

#page-scroll-anchor-grey {
    background-color: #dcdbd7
}
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Code Atelier</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://use.typekit.net/png0dbx.css">
        <link rel="stylesheet" type= "text/css" href="bootstrap.css">
        <link rel="stylesheet" type= "text/css" href="style.css"> 
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">
                <img src="/Elements/Logo/logo-dark.svg" width="30" height="30" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
              <div class="navbar-nav">
                <a class="nav-item nav-link active" href="#">Merk Atelier <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="#">Oplossingen</a>
                <a class="nav-item nav-link" href="#">Contact</a>
              </div>
            </div>
          </nav>
        
        <div class="container-fluid p-0">
            <div class="row">
                <div class="col-lg-6">
                    <div id="header-block-left">
                        <h1>Product A</h1>
                        <h6>Subtitel</h6>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div id="header-block-right">
                        <h1>Product A</h1>
                        <h6>Subtitel</h6>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div id="page-scroll-anchor-grey">
                        <h6>Scroll snel verder</h6>
                    </div>
                </div>
            <div class="row">
        </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>
        <script src="" async defer></script>
    </body>
</html>

Любые предложения будут великолепны!

1 Ответ

0 голосов
/ 10 декабря 2018

Используйте блок vh, чтобы установить высоту относительно высоты экрана.

Вы можете установить min-height s для nav / header и footer, чтобы они достигли определенного размера, а затем переключить #main height на max-height, чтобы он занял остальныевертикального пространства на экране. 

nav {
    height: 10vh;
    background: grey;
}

#main {
    height: 80vh;
}

#header-block-left {
    background: white;
}

#header-block-right {
    background: gray;
}

.btn {
    position: relative;
    top: -15px;
}

footer {
    height: 10vh;
    background: grey;
}
<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">
        <img src="/Elements/Logo/logo-dark.svg" width="30" height="30" alt="">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#">Merk Atelier <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#">Oplossingen</a>
            <a class="nav-item nav-link" href="#">Contact</a>
        </div>
    </div>
</nav>
<section id="main" class="container-fluid">
    <div class="row h-100">
        <div class="col-6">
            <div id="header-block-left" class="header-block h-100 d-flex flex-column justify-content-center align-items-center">
                <h1>Product A</h1>
                <h6>Subtitel</h6>
            </div>
            <button class="btn btn-primary mx-auto d-block">Text</button>
        </div>
        <div class="col-6">
            <div id="header-block-right" class="header-block h-100 d-flex flex-column justify-content-center align-items-center">
                <h1>Product A</h1>
                <h6>Subtitel</h6>
            </div>
            <button class="btn btn-primary mx-auto d-block">Text</button>
        </div>
    </div>
</section>
<footer class="container-fluid d-flex justify-content-center align-items-center">
    <p class="m-0">Text in the footer</p>
</footer>
...