0

该代码在大屏幕上正确显示了两列。但对于平板电脑大小的屏幕，两个 div 占据自己的行，每个使用 12 列。

我希望他们每个人都使用 6 列在同一个容器中。我曾尝试更改课程中的数字，col-xs-12 col-sm-6 col-md-6 col-lg-4 但没有任何效果。

这是我的代码：

<div class="container">
    <div class="row col-md-offset-0 col-lg-offset-2">
        <p><b>We Offer:</b></p>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
            <ul>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
            </ul>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 ">
            <ul>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
            </ul>
        </div>
    </div>
4

4 回答 4

1 

<div class = "row col-md-offset-0 col-lg-offset-2">
        <p><b>We Offer:</b></p>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">
        <ul>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>

        </div>


    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4 ">

        <ul>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>

    </div>

</div>

http://www.bootply.com/render/133129

于 2014-04-26T21:05:29.823 回答
1

除了上面 KyleMit 的回答，请注意，由于引导程序 3 的“移动优先”性质，您只需要“col-xs-6 col-lg-4”类，xs 定义将适用于更大的尺寸，除非被覆盖.

于 2014-10-15T18:55:09.297 回答
0

在大屏幕上你想要两列，但在小屏幕上你想要一列只占宽度的 50%？

您不会将列类放在.row. 曾经。

演示：http: //jsbin.com/vuyisu/1/

这.col-md-X是您的“大”，如果大是指 1200 像素及以上，则更.col-md-X改为.col-lg-X和平板电脑是指仅 768 像素 - 992 像素，您将更.col-xs-X改为.col-sm-X。当您嵌套列时，您需要一个环绕的.row.

   <div class="container">
    <div class="row">
       <div class="col-xs-6">
          <p><b>We Offer:</b></p>
          <div class="row">
             <div class="col-md-6">
                <ul>
                   <li>test</li>
                   <li>test</li>
                   <li>test</li>
                   <li>test</li>
                </ul>
             </div>
             <div class="col-md-6">
                <ul>
                   <li>test</li>
                   <li>test</li>
                   <li>test</li>
                   <li>test</li>
                </ul>
             </div>
          </div>
       </div>
    </div>
于 2014-10-15T19:10:58.070 回答
0

这似乎按我的预期工作。根据文档，小屏幕768px实际上可以很大。通过打开开发人员工具，您可以在调整网页大小时看到屏幕尺寸。您可以使用它来查看它如何处理不同的断点。

这是您的代码的实时演示：

带有原始代码的 jsFiddle

截屏：

截屏

解决方案：

如果您希望它在任何低于 768 像素处仍然有两列，则更col-xs-12改为col-xs-6，如下所示：

<div class="container">
    <div class="row col-md-offset-0 col-lg-offset-2">
        <p><b>We Offer:</b></p>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">
            <ul>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
            </ul>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4 ">
            <ul>
                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>
            </ul>
        </div>
    </div>
</div>

jsFiddle 中的工作演示

于 2014-04-26T21:28:39.600 回答