如何防止徽章的重叠后，增加他们的大小在引导

我试图在bootstrap中创建更大字体的徽章。但问题是徽章在较小的屏幕上重叠，我该如何避免这种情况呢?下面是代码

     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body> 
<div class="container">
  <h2>Contextual Label Classes</h2>
  <p>Contextual classes can be used to color the label.</p>  
  <span class="label label-default" style="font-size: 1.25em;" >Default Label</span>
<span class="label label-default" style="font-size: 1.25em;" >Default Label</span>
<span class="label label-default" style="font-size: 1.25em;" >Default Label</span>
<span class="label label-default" style="font-size: 1.25em;" >Default Label</span>
<span class="label label-default" style="font-size: 1.25em;" >Default Label</span>
<span class="label label-default" style="font-size: 1.25em;" >Default Label</span>
<span class="label label-default" style="font-size: 1.25em;" >Default Label</span>
</div>
</body>
</html>

这里有一个小提琴http://jsfiddle.net/6nrdtku1/

你可以为它创建一个类，并做一个样式:

.yourClass{
    display:inline-block;
    font-size: 1.25em;
    margin-bottom: .5em; /*Or whatever looks good*/
}

相关内容

最新更新

热门标签：