许多徽章移至下面的行 - 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> <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>
随时随地看视频慕课网APP
相关分类
Html5
