为了账号安全,请及时绑定邮箱和手机立即绑定

许多徽章移至下面的行 - Bootstrap

许多徽章移至下面的行 - Bootstrap

扬帆大鱼 2023-10-30 14:54:52
在我的项目中,我使用 Bootstrap 徽章来显示价目表。我的价目表已移至新行并在移动设备上进行了削减。https://i.stack.imgur.com/9PyU5.jpg 移动的:https://i.stack.imgur.com/clOZR.jpg 如何创建大量徽章,以便只有最后一个徽章移动到新行。我不想让它们都排成一行。我的代码:<p class="mt-0 mb-2 text-sm">  <span class="mr-1">    Talk time:  </span>  <span class="badge badge-white ml-1">    <i class="fas fa-euro-sign"></i> {{ talk_1 }}/30min  </span>  <span class="badge badge-white ml-1">    <i class="fas fa-euro-sign"></i> {{ talk_2 }}/1h  </span>  <span class="badge badge-white ml-1">    <i class="fas fa-euro-sign"></i> {{ talk_3 }}/2h  </span></p>如果我不使用徽章而是使用文本和图标本身。所有内容都正确转移到新线路,并且不会在移动设备上被切断。
查看完整描述

1 回答

?
慕娘9325324

TA贡献1783条经验 获得超4个赞

<!DOCTYPE html>

<html>

<head>

    <title>Bootstrap Example</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <script src='https://kit.fontawesome.com/a076d05399.js'></script>

</head>

<body class="bg-dark">

    <div class="mt-0 mb-2 text-sm">

        <div class="mr-1 text-light">

          Talk time:

        </div>

        <span class="badge badge-light ml-1">

          <i class="fas fa-euro-sign"></i>  150/30min

        </span>

        <span class="badge badge-light ml-1">

          <i class="fas fa-euro-sign"></i>  200/1h

        </span>

        <span class="badge badge-light ml-1">

          <i class="fas fa-euro-sign"></i>  250/2h

        </span>

        <span class="badge badge-light ml-1">

            <i class="fas fa-euro-sign"></i>  250/2h

          </span>

          <span class="badge badge-light ml-1">

            <i class="fas fa-euro-sign"></i>  250/2h

          </span>

          <span class="badge badge-light ml-1">

            <i class="fas fa-euro-sign"></i>  250/2h

          </span>

          <span class="badge badge-light ml-1">

            <i class="fas fa-euro-sign"></i>  250/2h

          </span>

          <span class="badge badge-light ml-1">

            <i class="fas fa-euro-sign"></i>  250/2h

          </span>

          <span class="badge badge-light ml-1">

            <i class="fas fa-euro-sign"></i>  250/2h

          </span>

          <span class="badge badge-light ml-1">

            <i class="fas fa-euro-sign"></i>  250/2h

          </span>

          <span class="badge badge-light ml-1">

            <i class="fas fa-euro-sign"></i>  250/2h

          </span>

          <span class="badge badge-light ml-1">

            <i class="fas fa-euro-sign"></i>  250/2h

          </span>

    </div>

</body>

</html>

我将<p>标签更改为<div>



查看完整回答
反对 回复 2023-10-30
  • 1 回答
  • 0 关注
  • 86 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信