使Bootstrap列停止在移动设备上中断

Question

我正在尝试在Bootstrap行中获取内容以缩小规模，而不是在移动设备上分成几列。我将如何处理？ 这是到目前为止我所拥有的示例：

<div class="row justify-content-center">
    <div class="col-xs-4" style="padding:0!important;"> 
        <a class="btn btn-light" style="width: 200px; height: 200px;>
            <h2> title </h2>
            <img src="" style="width:100px; height:100px;">
        </a>
    </div>
    <div class="col-xs-4" style="padding:0!important;"> 
        <a class="btn btn-light" style="width: 200px; height: 200px;>
            <h2> title </h2>
            <img src="" style="width:100px; height:100px;">
        </a>
    </div>
    <div class="col-xs-4" style="padding:0!important;"> 
        <a class="btn btn-light" style="width: 200px; height: 200px;>
            <h2> title </h2>
            <img src="" style="width:100px; height:100px;">
        </a>
    </div>
</div>

当我在手机上打开它时，每一列在页面上显示为一行。我希望所有三个人都在移动设备上位于同一行。

Answer 1

Bootstrap-4删除了 *-xs-* 类的所有变体。

col-xs- 已在Bootstrap 4中删除，以支持 col- 。 因此，为了在各种设备上都具有三个等宽的列，请使用 col-4 或仅使用 col 而不是 {{1 }} 。

https://getbootstrap.com/docs/4.1/layout/grid/#grid-options

---

使用 col-xs-4 类代替p-0标签的内联填充样式。

https://getbootstrap.com/docs/4.0/utilities/spacing/

---

使用 a 类代替 img-fluid 元素的内联CSS样式，以使其具有响应性。

https://getbootstrap.com/docs/4.0/content/images/#responsive-images

---

您可能知道，移动设备的宽度小于img。但是414px标签宽度的总和大于a。因此，您应该使用 414px 设置其最大宽度，并同时使用max-width或width: 100%。

  

max-width CSS属性设置元素的最大宽度。这样可以防止使用的width属性值变得大于max-width指定的值。 https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

---

在这种情况下，由于该行正好有w-100列，因此不必使用12。因此，最好将其删除。

---

justify-content-center

https://codepen.io/anon/pen/djWZJj

Answer 2

您需要更改col结构。 Bootstrap 4已更改断点。

class Ball(pygame.sprite.Sprite):

    def __init__(self, x, y):
        pygame.sprite.Sprite.__init__(self)
        self.image = pygame.Surface((100, 100)).convert_alpha()
        self.image.fill((160, 70, 0))
        # Pass the midbottom position as an argument to `get_rect`.
        self.rect = self.image.get_rect(midbottom=(x, y))
        # Alternatively.
        # self.rect.midbottom = x, y

        # Set the x and y attributes afterwards.
        self.x = self.rect.x
        self.y = self.rect.y

Answer 3

这很可能与您使用的图像的高度和宽度有关。我建议只使用max-height和max-width并允许图像缩放到屏幕尺寸。

<div class="row justify-content-center">
            <div class="col-xs-4" style="padding:0!important;"> 
               <a class="btn btn-light" style="width: 200px; height: 200px;>
                  <h2> title </h2>
                  <img src="" style="max-width:100px; max-height:100px;">
               </a>
            </div>