Question

我是bootstrap的新手。我正在尝试设计一个具有不相等列的div。我希望所有列在桌面上水平显示，我想为移动和平板电脑连续显示2或3个。我设计了它对于桌面。但我无法为xs和sm做。

请在下面找到我的代码：

<div class="container">

        <div class="row" style="padding-top:10px;padding-left:10px;">
            <div class="col-xs-2 ">

                cola
            </div>
            <div class="col-xs-2 ">
              colb
            </div>

            <div class="col-xs-2">
             colc

            </div>


            <div class="col-xs-3 ">
               cole
            </div>

            <div class="col-xs-3 ">
              colf

            </div>
        </div>
        <div class="row" style="padding-top: 20px; padding-left: 10px;">
            <div class=" col-xs-2">
               cola
            </div>
            <div class="col-xs-2">
              colb
            </div>

            <div class="col-xs-2">

                colc
            </div>

            <div class="col-xs-2">
               cold 
            </div>
            <div class="col-xs-2" style="display:inline-block">
               cole
            </div>

            <div class="col-xs-2" style="display:inline-block">
       colf
            </div>


        </div>
        <div class="row" style="padding-top: 20px; padding-left: 10px;">
            <div class="col-xs-2">
               cola
            </div>
            <div class="col-xs-2">
              colb
            </div>

            <div class="col-xs-2">
               colc
            </div>

            <div class="col-xs-6">
               cole

            </div>


        </div>

</div>
enter code here

我在每列中都有图像和文字，它在手机和平板电脑中重叠。

请帮忙。

Answer 1

您所要做的就是为手机，平板电脑和桌面应用不同的课程像这样的东西

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-4 col-md-12">

    </div>

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

    </div>
  </div><!-- .row -->
</div><!-- .container -->

所以你会有移动设备上有1列，带2个列（col-xs-6和col-xs-6）平板电脑上的1排3列（col-sm-4和col-sm-4）桌面上有2行（col-md-12和col-md-12）

如何为手机，平板电脑和台式机划分12列bootstrap div

1 个答案: