需要一个bootstrap推/拉主题代码

时间:2017-03-30 21:12:09

标签: html css twitter-bootstrap optimization

我试图使用push和pull类来实现特定的响应式bootstrap主题,虽然我已经寻找并参考了各种示例来试图弄清楚我如何能够重新实现我想要的东西,但我有无法得出一个不会过度弄脏代码的有效结论。我也很好,只是简单解释一下在执行代码时必须采取的预防措施,以达到这个结果。 ty提前。基本上这是我的结构,我试图解决我的需求的方式。

<div class="row">
    <div class="col-md-4 col-sm-6 col-xs-14">
        <div class="container-fluid">
            <div class="col-md-2 col-sm-2 col-xs-2">
                <div></div>
                <div></div>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-3">
                <div>
                    <div></div>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-4">
                <p></p>
                <div>
                    <p></p>
                </div>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-3">
                <div>
                    <div></div>
                </div>
            </div>
            <div class="col-md-2 col-sm-2 col-xs-2">
                <div></div>
                <div></div>
            </div>
        </div>
    </div>
    <div class="col-md-10 col-sm-8 col-xs-14">
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="clearfix visible-md"></div>
    <div class="col-md-4 col-sm-6 col-xs-14">
        <div>
            <p></p>
        </div>
        <div>
            <p></p>
        </div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-14">
        <div class="col-md-14 col-sm-14 col-xs-14">
            <a class="col-md-3 col-sm-3 col-xs-3" href="#"></a>
            <p class="col-md-8 col-sm-8 col-xs-8"></p><a class="col-md-3 col-sm-3 col-xs-3" href="#"></a>
        </div>
    </div>
</div>

示例

enter image description here

0 个答案:

没有答案