Пользовательские вложенные столбцы в Bootstrap 3

#html #css #twitter-bootstrap #twitter-bootstrap-3

#HTML #css #twitter-bootstrap #twitter-bootstrap-3

Вопрос:

Я получил жесткое требование создать макет, подобный этому изображению, с помощью Bootstrap 3:

ожидаемый макет

В настоящее время я могу сделать это так:

это

Вот мой образец HTML-макета: https://jsfiddle.net/isherwood/4etczrwx /

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">

    <div class="row">

        <div class="col-sm-6" style="height:500px;background-color:red;">
            images
        </div>

        <div class="clearfix col-sm-6"  style="height:100px;background-color:yellow;">
            text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg
            text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg
            text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg
        </div>

        <div class="col-sm-3" style="height:200px;background-color:blue;">
            keyfeature
            <ul>
                <li>testest 1</li>
                <li>testest 2</li>
                <li>testest 3</li>
                <li>testest 4</li>
            </ul>
        </div>

        <div class="col-sm-3" style="height:600px;background-color:gray;">
            Price tab here
        </div>

        <div class="col-sm-9" style="height:800px;background-color:green;">
            Configurator here
        </div>
    </div>
</div>

Я думаю, что мне чего-то не хватает, чтобы сделать зеленый столбец?
или я должен использовать push / pull, чтобы заставить его работать в соответствии с моими ожиданиями?

1. вы можете попробовать masonry isotope.metafizzy.co/layout-modes/masonry.html 🙂

2. Спасибо @DenPat, наша система использует bootstrap3. совместим ли он с bootstrap3 или это совершенно другой фреймворк css?

3. это не css-фреймворк, его можно использовать с jQuery, вы также можете взглянуть на их пример codepen: codepen.io/desandro/pen/mIkhq

4. это действительно здорово, позвольте мне посмотреть, может ли это решить проблему

Ответ №1:

Примените float: right; свойство к серому блоку, когда ширина экрана станет 786px или больше. Для этой цели я определил новый специальный класс .pull-sm-right .

 @media (min-width: 768px) {
  .pull-sm-right {
    float: right !important;
  }
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">

    <div class="row">

        <div class="col-sm-6" style="height:500px;background-color:red;">
            images
        </div>

        <div class="clearfix col-sm-6"  style="height:100px;background-color:yellow;">
            text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg
            text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg
            text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg
        </div>

        <div class="col-sm-3" style="height:200px;background-color:blue;">
            keyfeature
            <ul>
                <li>testest 1</li>
                <li>testest 2</li>
                <li>testest 3</li>
                <li>testest 4</li>
            </ul>
        </div>

        <div class="col-sm-3 pull-sm-right" style="height:600px;background-color:gray;">
            Price tab here
        </div>

        <div class="col-sm-9" style="height:800px;background-color:green;">
            Configurator here
        </div>
    </div>
</div>

Ответ №2:

если это фиксированный макет, вы можете просто добавить margin-top:-200px в этот зеленый раздел следующим образом: jsfiddle.net/4etczrwx/1

 <div class="container-fluid">
    <div class="row">
        <div class="col-xs-6" style="height:500px;background-color:red;">
            images
        </div>

        <div class="clearfix col-xs-6" style="height:100px;background-color:yellow;">
            text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg
        </div>

        <div class="col-xs-3" style="height:200px;background-color:blue;">
            keyfeature
            <ul>
                <li>testest 1</li>
                <li>testest 2</li>
                <li>testest 3</li>
                <li>testest 4</li>
            </ul>
        </div>

        <div class="col-xs-3" style="height:600px;background-color:gray;">
            Price tab here
        </div>

        <div class="col-xs-9" style="height:800px;background-color:green;margin-top:-300px;">
            Configurator here
        </div>
    </div>
</div>

Приветствия !