Question

这是一个初学者的问题，但我想知道是否有可能使用bootstrap的list标签将它们“链接在一起”，而不是让它们“堆叠”。

例如，我有脚本：

 <ul class="list-inline">
     <li>a</li>
     <li>b</li>
     <li>c</li>
 </ul>
 <ul class="list-inline">
     <li>d</li>
     <li>e</li>
     <li>f</li>
 </ul>

返回......

a b c

d e f

如何以这种方式重新排列输出？

a b c d e f

我真正想要完成的是将两者显示为单独的div inline

Answer 1

您需要float:left ul

<ul class="list-inline pull-left">
     <li>a</li>
     <li>b</li>
     <li>c</li>
</ul>

<ul class="list-inline pull-left">
     <li>d</li>
     <li>e</li>
     <li>f</li>
 </ul>

希望它会对你有所帮助。

Answer 2

＆＃13;

.inline-block {display:inline-block;}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<ul class="list-inline inline-block">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<ul class="list-inline inline-block">
  <li>d</li>
  <li>e</li>
  <li>f</li>
</ul>

＆＃13;

默认情况下，UL充当块级元素，您只需将其转换为内联块;

如何“链接”引导程序的内联列表

2 个答案: