Bootstrap 3中的自定义嵌套列

Question

我要求使用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>

我想我错过了制作绿色col的东西？ 或者我应该使用推/拉来使其按预期工作？

Answer 1

如果这是固定布局，你可以将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>

干杯！

Answer 2

当屏幕宽度变为float: right;或更大时，将786px属性应用于灰色块。我为此目的定义了一个新的特殊类.pull-sm-right。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;