Как получить вертикальное расстояние с помощью загрузочной сетки?

Мне тяжело обволакивать вокруг, как достичь вертикального расстояния с помощью bootstrap grid system. Я хочу, чтобы одна коробка была на 1/3 сверху и слева, а другая - на 1/3 снизу, но была полной. У меня есть три строки, прямо сейчас, охватывающих 12, 6 и 12 столбцов соответственно:Как получить вертикальное расстояние с помощью загрузочной сетки?

Пример компоновки с использованием draw.io:

enter image description here

в пределах body тега index.html:

<body> 
    <br> 
    <br> 
    <br> 

    <!-- Content --> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-6 col-md-offset-0 col-sm-8 col-sm-offset-0 col-xs-12 col-xs-offset-0"> 
     <div class="col-md-12 col-sm-12 col-xs-12 text-left"> 
      <h1><strong>I am strong<strong><span class="lead">i am less strong</span></h1> 
     </div> 
     </div> 
    </div> 
    </div> 

    <!-- JavaScript --> 
    <script src="assets/third-party/js/jquery.min.js"></script> 
    <script src="assets/third-party/js/bootstrap.min.js"></script> 
</body>

источник

2015-02-17 tarabyte

Прямо сейчас это запрос темы, а не вопрос. Можете ли вы включить то, что вы пробовали, что не работает, и объяснить, с чем вы столкнулись? –

Строки и столбцы не работают так, как вы пытаетесь их использовать. Ваше объяснение '1/3' немного запутанно. Информация в вашем вопросе противоречит вашему коду. Я не вижу трех строк, охватывающих 12, 6 и 12 столбцов. – hungerstar

Если ваши вертикальные столбцы являются div, а затем дают каждому значение margin в пикселях, чтобы отделить их друг от друга. Затем установите width каждого столбца на процентное значение, чтобы они соответствовали всему окну.

источник

2015-02-17 18:50:45 LightHouse

Чтобы перевести на термины бутстрапа, «вертикальные столбцы - это div» = '.row' ..... 'установить ширину' = использовать' .col .... 'classes – Ted

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

Разметка:

<div class="container full-page-height"> 
    <div class="row offset-top-third"> 
    <div class="col-md-6 col-md-offset-3 white"> 
     <h1>Hey you!</h1> 
    </div> 
    </div> 
    <div class="row offset-bottom-third"> 
    <div class="bgimg">Background image here</div> 
    </div> 
</div>

CSS-:

.bgimg { 
    background: #333; 
    color: #eee; 
} 

.white { 
    background: #fff; 
} 

.offset-top-third { 
    position:relative; 
    top: 33.333%; 
    height: 33.333%; 
    background: #888; 
} 

.offset-bottom-third { 
    position:relative; 
    top: 66.667%; 
    height: 33.333%; 
    background: #888; 
}

Javascript:

$(function() { 
    var h = window.innerHeight; 
    $(".full-page-height").css({height: h}); 
});

bootply.

источник

2015-02-17 19:02:27

Как получить вертикальное расстояние с помощью загрузочной сетки?

ответ

Смежные вопросы