时间戳

首页 > 解决方案 > 无法使用 Bootstrap 对齐同一行中的图像

html - 无法使用 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>

有了这个，结果如下

不在一排

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

提前致谢

标签： htmlcsstwitter-bootstrap

解决方案

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>

推荐阅读