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上显示的产品简介看起来像两行，如何更改这一点，以便在ipad上查看时它们并排显示？我是初学者，所以我试图让我的头围绕着cols等

Answer 1

类 ~~col-xs~~ col-sm将进行调整，以便在移动设备上查看页面时堆叠列。与col-md和col-lg不同，列将并排保留，直到窗口处于移动电话宽度，我认为这是360px左右。

修改

在Bootstrap文档中，它指出断点是768px。因此，当窗口宽度小于768px时，使用 ~~col-xs~~ 时，列将被堆叠。

I created a demo that shows when the columns stack

Answer 2

在两个div上添加col-sm-6，应该修复它！

在bootstrap网站上查看grid section。

Answer 3

多数民众赞成网络响应，请阅读Bootstrap documentation以获取有关网格的明确说明。

当你看到像平板电脑或iPad这样的小型设备时它不会并排查看，因为有一些规则

.col-xs-用于额外的小型设备（＆lt; 768px）

.col-sm-适用于小型设备（＆gt; = 768px）

.col-md-适用于中型桌面（＆gt; = 992px）

.col-lg-适用于大型桌面（＆gt; = 1200px）

所以，假设你有<div class="col-lg-6">表示它有一半容器有12个网格（除非你在LESS修改），div会在大型设备上打开时并排查看，因为它使用{{1如果你想在平板电脑上并排查看哪些小设备，请考虑使用col-lg-

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

3 个答案: