Question

我是新手，现在开始使用它进行网站建设。我想将小图像排成一排以用于移动视图。代码用于下面

<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

在引导程序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>

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

1 个答案: