Question

我想将Ticks和Names组合在一起，这样如果一个名字进入一个新行，那么tick和全名

e.g。

＆＃13;

<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Nydia Dahm
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Hillary Stano
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Mikki Rudisill
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Lashonda Hardcastle
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Starr Ewalt
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Geri Groen
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Armandina Foreman
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Alden Lusk

＆＃13;

如果我将文本放入跨度中，我似乎会得到额外的间距

https://jsfiddle.net/s7mtzt5f/

Answer 1

您需要将每个小组打包在<span>中并添加white-space:nowrap css样式。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Nydia Dahm</span>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Hillary Stano</span>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Mikki Rudisill</span>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Lashonda Hardcastle</span>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Starr Ewalt</span>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Geri Groen</span>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Armandina Foreman</span>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Alden Lusk</span>

更新： bradlis7指出bootstrap有一个text-nowrap类，它与上面做的一样。你绝对应该使用text-nowrap来使代码更简洁和引导程序兼容。像这样使用它：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Nydia Dahm</span>
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Hillary Stano</span>
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Mikki Rudisill</span>
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Lashonda Hardcastle</span>
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Starr Ewalt</span>
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Geri Groen</span>
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Armandina Foreman</span>
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Alden Lusk</span>

Answer 2

<div><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Nydia Dahm</div>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Hillary Stano<br/>

其中任何一个都应该有用。

Answer 3

看起来像这样的人也许。

  span.full-name {
  display: inline-flex;
}

<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

 
</head>
<body>
 <span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Nydia Dahm</span>
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Hillary Stano</span>
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Mikki Rudisill</span>
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Lashonda Hardcastle</span>
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Starr Ewalt</span>
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Geri Groen</span>
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Armandina Foreman</span>

<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Alden Lusk</span>
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Reka Jape</span>
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Mikki Rudisill</span>
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Lashonda Hardcastle</span>
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Starr Ewalt</span>
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Starr Ewalt</span>
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Geri Groen</span>
<span class="full-name"><i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Armandina Foreman</span>
</body>

将Glyphicon和文本组合在一起

3 个答案: