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

Question

我是 bootstrap 的新手，现在正在用它制作一个网站。我想为我的移动 View 在一行中对齐小图像。下面是使用的代码

<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="/image/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="/image/3mG2d.jpg" alt="" style="height: 50px; width: 50px;"><p style="text-transform: uppercase;"><b>Birthday</b></p></a>
            </div>  
        </div>
    </div>
</div>