无法使用 Bootstrap 对齐同一行中的图像

Question

我是 bootstrap 的新手，现在用它做一个网站。 我想为我的移动视图将小图像对齐一行。用于它的代码如下

<div class="mobile">
    <div class="container">
        <div class="row">
            <div class="col-sm-1 col-xs-1">
                <a href="shop"><img src="assets/img/icon/birthday.png" alt="" style="height: 50px; width: 50px;"><p style="text-transform: uppercase;"><b>Birthday</b></p></a>
            </div>   
            <div class="col-sm-1 col-xs-1">
                <a href="shop"><img src="assets/img/icon/birthday.png" alt="" style="height: 50px; width: 50px;"><p style="text-transform: uppercase;"><b>Birthday</b></p></a>
            </div>  
        </div>
    </div>
</div>

有了这个，结果如下

Not in one row

我想要的只是它看起来并排而不是堆叠。请帮帮我

提前致谢

Answer 1

col-sm-1 太小，宽度不适合断线的内容。

所以设置col-sm->1

在 bootstrap 4 中也没有 xs 大小。所以删除它

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="mobile">
    <div class="container">
        <div class="row">
            <div class="col-sm-2">
                <a href="shop"><img src="https://i.stack.imgur.com/3mG2d.jpg" alt="" style="height: 50px; width: 50px;"><p style="text-transform: uppercase;"><b>Birthday</b></p></a>
            </div>   
            <div class="col-sm-2">
                <a href="shop"><img src="https://i.stack.imgur.com/3mG2d.jpg" alt="" style="height: 50px; width: 50px;"><p style="text-transform: uppercase;"><b>Birthday</b></p></a>
            </div>  
        </div>
    </div>
</div>