在平板设备上查看时并排显示的两列 - bootstrap 3

Question

我有以下HTML

<div class="row col-lg-12" id="productBrief">
    <div id="RaspberryAndChocolate" style="display:none; height:200px;">

        <div class="col-lg-6"> @*-- Floats Left*@
            <img src="~/Content/Images/YogurtImages_404x290/image1.png" class="img-responsive" style="margin: 0 auto; padding-top: 5%" alt="Image alt" />
        </div>

        <div class="col-lg-6" id="productDesc"> @*-- Floats Right*@
            <h2 class="raspberryRed productLineHeight">FLAVOUR #3</h2>
            <h1 class="raspberryRed">
                RASPBERRY &<br /> WHITE CHOCOLATE
            </h1>
            <p class="productPara">
                A decadent combination of whole raspberries and smooth white chocolate that you will want to make last as long as possible. Teaspoon recommended.
            </p>
            <p>
                <span class="label label-as-badge" style="font-size: 0.9em; padding:3%"><a href='@Url.Action("Products", "Products")' class="colourWhite">VIEW ALL FLAVOURS</a></span>
            </p>
        </div>
    </div>
</div>

在桌面上查看时，它们并排对齐，看起来很棒，在 Ipad 上查看时，productDesc 出现在 productBrief 下，看起来像两行，我如何更改此设置，使它们并排显示在 ipad 上查看时？我是 bootstrap 的新手，所以我正在努力了解 cols 等

Answer 1

在两个 div 上添加 col-sm-6，应该可以解决它！

检查 bootstrap 网站上的 grid section。

Answer 2

class~~col-xs~~col-sm 将进行调整，以便在移动设备上查看页面时将列堆叠起来。与 col-md 和 col-lg 不同，这些列将保持并排，直到 window 处于移动 phone 宽度，我认为它大约为 360px。

编辑

在Bootstrap文档中，它指出断点在768px。因此，当使用 ~~col-xs~~.

时 window 宽度小于 768px 时，列将被堆叠

I created a demo that shows when the columns stack

Answer 3

这就是所谓的网络响应，请阅读Bootstrap documentation以获得关于网格的清晰解释。

当然，当您查看平板电脑或 iPad 等小型设备时，它不会并排显示，因为有一些规则

.col-xs- 适用于超小型设备 (<768px)

.col-sm- 适用于小型设备 (>=768px)

.col-md- 适用于中型桌面 (>=992px)

.col-lg- 适用于大型桌面 (>=1200px)

所以，假设你有 <div class="col-lg-6"> 意味着它有一半的容器有 12 个网格（除非你修改 LESS），当你在大型设备上打开它时 div 将并排查看由于它使用 col-lg- ，如果您想在小型设备的平板电脑上并排查看它，请考虑使用 col-sm-6

在平板设备上查看时并排显示的两列 - bootstrap 3

Two columns to appear side by side when viewed on the tablet device - bootstrap 3

html

css

twitter-bootstrap-3