Question

所以我在一行中有一行允许我在页面底部按出我喜欢的方式放置3个按钮。它在桌面和平板电脑上看起来很好，但在移动设备上它们堆叠它们并且col-xs-4 div是全宽度而不是它的容器的1/3。有什么我可以改变，以便圆圈没有堆叠？

相关代码：

    <div class="row buttonBottom">
        <div class="col-md-4 col-xs-2 col-sm-2"></div>
        <div class="col-md-4 col-xs-8 col-sm-8">
          <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3"></div>
            <div class="col-xs-2 col-sm-2 col-md-2">
              <div class="wrap-circle">
                <div class="circle jetblack"></div>
              </div>
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2">
              <div class="wrap-circle">
                <div class="circle gold"></div>
              </div>
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2">
              <div class="wrap-circle">
                <div class="circle white"></div>
              </div>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3"></div>
          </div>
        </div>
        <div class="col-md-4 col-xs-2 col-sm-2"></div>
      </div>

Answer 1

只需在类名中添加一个没有-xs-文本的额外类。

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

查看相关文档：https://getbootstrap.com/docs/4.0/layout/grid/#responsive-classes

在移动设备上停止自举堆叠

1 个答案: