猿问

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

在我的项目中，我使用 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>

如果我不使用徽章而是使用文本和图标本身。所有内容都正确转移到新线路，并且不会在移动设备上被切断。


扬帆大鱼
浏览 87回答 1
1回答

慕娘9325324

<!DOCTYPE html><html><head>&nbsp; &nbsp; <title>Bootstrap Example</title>&nbsp; &nbsp; <meta charset="utf-8">&nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1">&nbsp; &nbsp; <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">&nbsp; &nbsp; <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>&nbsp; &nbsp; <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>&nbsp; &nbsp; <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>&nbsp; &nbsp; <script src='https://kit.fontawesome.com/a076d05399.js'></script></head><body class="bg-dark">&nbsp; &nbsp; <div class="mt-0 mb-2 text-sm">&nbsp; &nbsp; &nbsp; &nbsp; <div class="mr-1 text-light">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Talk time:&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <span class="badge badge-light ml-1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-euro-sign"></i>&nbsp; 150/30min&nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; <span class="badge badge-light ml-1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-euro-sign"></i>&nbsp; 200/1h&nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; <span class="badge badge-light ml-1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-euro-sign"></i>&nbsp; 250/2h&nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; <span class="badge badge-light ml-1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-euro-sign"></i>&nbsp; 250/2h&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="badge badge-light ml-1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-euro-sign"></i>&nbsp; 250/2h&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="badge badge-light ml-1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-euro-sign"></i>&nbsp; 250/2h&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="badge badge-light ml-1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-euro-sign"></i>&nbsp; 250/2h&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="badge badge-light ml-1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-euro-sign"></i>&nbsp; 250/2h&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="badge badge-light ml-1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-euro-sign"></i>&nbsp; 250/2h&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="badge badge-light ml-1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-euro-sign"></i>&nbsp; 250/2h&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="badge badge-light ml-1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-euro-sign"></i>&nbsp; 250/2h&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="badge badge-light ml-1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-euro-sign"></i>&nbsp; 250/2h&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; </div></body></html>我将<p>标签更改为<div>
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答