Как создать сетку бутстрапа? - PullRequest
Новая
       34

Как создать сетку бутстрапа?

0 голосов
/ 30 января 2019

У меня проблема с созданием макета Boostrap.

Я хочу сделать что-то вроде этого: enter image description here

Что-то не так в моем скрипте? 

  <div class="row">
        <div class="col-md-12">
          <div class="col-md-3">
              <p>Colum 1</p>
          </div>
         <div class="col-md-6">
              <p>Colum 2</p>
         </div>
          <div class="col-md-3">
               <p>Colum 3</p>
          </div>
          <div class="col-md-9">
              <p>Colum 4</p>
          </div>
        </div>
  </div>

Ответы [ 3 ]

0 голосов
/ 30 января 2019

Этот код будет вам полезен. 

<div class="container">
  <div class="row">
    <div class="col-md-3" style="height:700px;background:red;">
      <div class="" role="complementary">
                  col-md-3
      </div>
    </div>
    <div class="col-md-9" style="height:700px;"  >
      <div class="col-md-6" style="height:350px;background:green;">.col-md-6</div>
        <div class="col-md-3" style="height:350px;background:pink;">.col-md-3</div>
         <div class="col-md-9" style="height:350px;background:blue;">.col-md-9</div>
    </div>
  </div>
</div>
0 голосов
/ 30 января 2019

По сути, вы не можете вкладывать col-* классы в другие col-* классы, они должны быть заключены в класс row.Теперь это мой подход для того, чтобы делать то, что вы хотите на Bootstrap 4. 

<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<div class="container-fluid">
<div class="row">

  <div class="col-3 text-center bg-info">
    Column A1
  </div>

  <div class="col-9">
    <div class="row">
      <div class="col-6 text-center bg-danger">
        <p>Column B1</p>
      </div>
      <div class="col-3 text-center bg-primary">
        <p>Colum B2</p>
      </div>      
      <div class="col-9 text-center bg-warning">
        <p>Colum B3</p>
      </div>
    </div>
  </div>

</div>    
</div>

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

0 голосов
/ 30 января 2019

Полагаю, вам нужно создать вложенную строку. Просто попробуйте поэкспериментировать 

 <div class="row">
      <div class="col-md-3">
          <p>Colum 1</p>
      </div>
      <div class="col-md-6">
          <p>Colum 2</p>
      </div>
      <div class="col-md-3">
           <p>Colum 3</p>
      </div>
   <div class="row">
      <div class="col-md-9">
          <p>Colum 4</p>
      </div>
   </div>

...