0

首先，再次感谢您的帮助。

我喜欢你的回复，这是我在 xs 显示之前一直在寻找的。我试图在智能手机上重现亚马逊购物车的风格。

我一直在努力，并从移动（xs）版本开始并管理我的方式，但我仍然添加了两次特定代码。对此并不在意，尽管我会将所有重复的代码隐藏在我不需要的宽度中。我还将通过使用相应设备的移动检测将其完全删除。

这是我最终得到的结果：

    <div class="container">
    <div class="row show-grid">
        <div class="col-md-9 col-sm-12 col-xs-12">

            <div class="col-xs-12 visible-xs text-center">Subtotal (2 items): $636.80</div>
            <div class="col-xs-12 visible-xs"><button type="button" class="btn btn-default btn-lg btn-block">Proceed to Checkout</button></div>

            <div class="col-lg-7 col-md-7 col-sm-7 col-xs-9">Items to buy now</div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-3">Unit</div>
            <div class="col-lg-1 col-md-1 col-sm-1 hidden-xs">Qty</div>
            <div class="col-lg-2 col-md-2 col-sm-2 hidden-xs">Total</div>

            <div class="clearfix visible-sm visible-xs"></div>

            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-3"><img src="http://dummyimage.com/62x80/000/fff.png" alt="Item 1"></div>
            <div class="col-lg-5 col-md-5 col-sm-5 col-xs-6">Luxurious Leather Moto Jacket</div>
            <div class="col-lg-1 col-md-1 col-sm-1 col-sm-push-2 col-xs-3"><input type="number" value="2"></div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-sm-pull-1 hidden-xs">$318.40</div>
            <div class="col-lg-2 col-md-2 col-sm-2 hidden-xs">$638.40</div>

            <div class="col-xs-6 visible-xs">$318.40</div>
            <div class="col-xs-3 visible-xs"><button type="button" class="btn btn-link btn-xs">Update</button></div>

            <div class="clearfix visible-xs"></div>

            <div class="col-xs-3 visible-xs"></div>
            <div class="col-lg-7 col-md-7 col-sm-7 col-xs-9"><ul><li>You save: $79.60 ( 20%)</li><li>In Stock</li><li>Eligible for FREE Super Saver Shipping</li></ul></div>

            <div class="col-xs-3 visible-xs"></div>
            <div class="col-lg-1 col-md-1 col-sm-1 visible-sm col-xs-2"><button type="button" class="btn btn-link btn-xs">Update</button></div>
            <div class="clearfix visible-sm"></div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-sm-offset-2 col-xs-2"><button type="button" class="btn btn-link btn-xs">Delete</button></div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-3"><button type="button" class="btn btn-link btn-xs">Save for Later</button></div>
            <!-- eof ITEM 1 -->

            <div class="clearfix visible-xs"></div>

            <div class="col-xs-6 visible-xs"></div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-6 col-xs-6 text-right">Subtotal: $318.40</div>

        </div>

        <div class="clearfix visible-sm visible-xs"></div>


        <div class="col-md-3 col-sm-12 col-xs-12">
            <div class="col-lg-12 col-md-12 col-sm-6 col-xs-6 hidden-xs pull-right"><button type="button" class="btn btn-default btn-lg btn-block">Checkout</button></div>
            <div class="col-lg-12 col-md-12 col-sm-6 col-xs-6"><button type="button" class="btn btn-link btn-xs">Continue Shopping</button></div>
        </div>

    </div>
</div>
4

1 回答 1

0

尝试嵌套列和行：http: //getbootstrap.com/css/#grid-nesting

示例：http ://bootply.com/79747

html：

   <div class="container">
    <div class="row">
        <div class="col-md-10 col-sm-12">
        <h1>shop</h1>

        <!-- nesting -->

        <div class="row">
        <div class="row">
            <div class="col-sm-6 col-xs-12">
                <!-- nesting -->
                <div class="row">
                <div class="col-xs-12">Heading</div>
                </div>
                <div class="row">   
                <div class="col-xs-4"><img src="http://dummyimage.com/600x600/" class="img-responsive"></div>
                <div class="col-xs-8">Article name</div>
                </div>
            </div>  
            <div class="col-sm-6 col-xs-12">
                <div class="row">
                <div class="col-xs-4">Unit</div>
                <div class="col-xs-4">Quality</div>
                <div class="col-xs-4">Total</div>
                </div>
                <div class="row">
                <div class="col-xs-4">$122</div>
                <div class="col-xs-4"><select><option>10</option></select></div>
                <div class="col-xs-4">$1220</div>
                </div>
                <div class="row">
                <div class="col-xs-4">&nbsp;</div>
                <div class="col-xs-4"><button>delete</button></div>
                <div class="col-xs-4">&nbsp;</div>
                </div>
                <div class="row">
                <div class="col-xs-4">&nbsp;</div>
                <div class="col-xs-4"><button>update</button></div>
                <div class="col-xs-4">&nbsp;</div>
                </div>
            </div>
        </div>  
        <div class="row">   
            <div class="col-sm-6 col-sm-offset-6">
                subtotaal:
            </div>  
        </div>  
        </div>
        </div>
        <div class="col-md-2 col-sm-12">
        <h3>Buttons</h3>
        <button class="btn btn-default col-md-12 col-sm-6 col-xs-12">check out</button>
        <button class="btn btn-default col-md-12 col-sm-6 col-xs-12">shop more</button>
        </div>
    </div>  
    </div>
于 2013-09-08T23:52:35.633 回答