Справка по макету Bootstrap 4 - расширение столбцов до нужной высоты - PullRequest
Новая
       4

Справка по макету Bootstrap 4 - расширение столбцов до нужной высоты

0 голосов
/ 11 октября 2018

Итак, я пытаюсь создать сайт.В первый раз, используя bootstrap, я просто не могу понять, как правильно редактировать высоту, и мне кажется, что я только начал изучать кодирование с нуля.(Я взял несколько лет перерыва.)

Я пытаюсь заставить страницу выглядеть так на приведенном выше планшете (размер портрета)

Размер выше портрета:

enter image description here

Моя цель для большего размера состояла в том, чтобы основной корпус занимал около 80% окна, а нижний колонтитул / заголовок занимал остальноепространства.

И пытаюсь заставить его выглядеть так на планшете (портрет) и меньше:

Ниже портретного размера:

enter image description here

Моя цель для этого не состояла в том, чтобы просто опустить его под изображение и сделать его прокручиваемым.

Прямо сейчас мой код выглядит так: 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <title>The Last Names</title>
  <link rel="stylesheet" href="css/bootstrap4.min.css">
  <link rel="stylesheet" href="css/main.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
  
<body>
  
  <nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <a class="navbar-brand" href="#">Caitlyn &amp; Jacob Team Up</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">The Bridal Party</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">RSVP</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Registry</a>
        </li>
      </ul>
    </div>
  </nav>
  
  <div class="container-fluid">
    <div class="row">
    
      <!-- Pictures will go here -->
      <div class="picmain col-12 col-md-6 bg-primary">
        <h3>pics here</h3>
      </div>
      
      <!-- Info column row -->
      <div class="col-12 col-md-6">
        <div class="row">

          <!-- info 1 -->
          <div class="info1 col-12 bg-secondary">
            <h3>info1</h3>
          </div>

          <!-- info 2 -->
          <div class="info2 col-12 bg-info">
            <h3>info2</h3>
          </div>
          
        </div>
      </div>
      
    </div>
    
    <div class="row">
      <div class="footer col-12">Footer stuff will go here</div>
    </div>
    
  </div>
  
</body>

</html>

Может кто-нибудь помочь мне понять, что мне нужно сделать, чтобы добиться того, на что я надеялся?Спасибо:)

1 Ответ

0 голосов
/ 11 октября 2018

Что вы можете сделать в теле, это создать строку с двумя столбцами, а во втором столбце вы вложите 2 строки (каждая строка имеет класс "col").Посмотрите на этот пример пера `

 <!--General Row starts here --> 
    <div class="row">
      <!--first column starts here --> 
      <div class="col-md one ">
         <h1>Column </h1>
      </div>
      <!--first column ends here -->
      <!--second column starts here -->
       <div class="col-md">
         <!--first nested row starts here -->
         <div class="row">
           <div class="col  two">
             <h1> first Nested row with "col" class</h1>
           </div>
         </div>
 <!--first nested row ends here -->
 <!--second nested row starts here -->
           <div class="row">
             <div class="col three">
               <h1> second Nested row with "col" class </h1>
             </div>
         </div>
<!--second nested row ends here -->
         </div>
      </div>

</div>

` https://codepen.io/stevegates/pen/MPmRBp, а также ознакомьтесь с документацией по начальной загрузке для получения дополнительной информации о сетке начальной загрузки https://getbootstrap.com/docs/4.1/layout/grid/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...