我正在尝试制作内联列表,它提醒网格具有水平,因为它可以容纳卡片 . 问题是,如果我将列表项浮动到左侧,则文本中心不再起作用,列表本身也保持对齐 .
这是我使用ajax .load()
加载到列表项中的卡
<div class="my-card" style="width: 268px;">
<a href="" class="card-text">
<img class="card-img-top" src="http://placehold.it/268x280" alt="">
<div class="card-body py-3 px-0">
<div>Dolor labore duis eu eu qui officia aliqua minim.</div>
</div>
</a>
</div>
<div class="container-fluid">
<div class="row">
<div class="d-flex text-center">
<ul class="list-inline">
<li class="list-inline-item float-left"></li>
<li class="list-inline-item float-left"></li>
<li class="list-inline-item float-left"></li>
<li class="list-inline-item float-left"></li>
<li class="list-inline-item float-left"></li>
<li class="list-inline-item float-left"></li>
<li class="list-inline-item float-left"></li>
<li class="list-inline-item float-left"></li>
<li class="list-inline-item float-left"></li>
<li class="list-inline-item float-left"></li>
<li class="list-inline-item float-left"></li>
<li class="list-inline-item float-left"></li>
<li class="list-inline-item float-left"></li>
<li class="list-inline-item float-left"></li>
</ul>
</div>
</div>
</div>
这是相同的,但最后一项不会浮动,但列表居中:
<div class="container-fluid">
<div class="row">
<div class="d-flex">
<ul class="list-inline text-center pl-3 justify-content-start">
<li class="list-inline-item"></li>
<li class="list-inline-item"></li>
<li class="list-inline-item"></li>
<li class="list-inline-item"></li>
<li class="list-inline-item"></li>
<li class="list-inline-item"></li>
<li class="list-inline-item"></li>
<li class="list-inline-item"></li>
<li class="list-inline-item"></li>
<li class="list-inline-item"></li>
<li class="list-inline-item"></li>
<li class="list-inline-item"></li>
<li class="list-inline-item"></li>
<li class="list-inline-item"></li>
</ul>
</div>
</div>
</div>
那么问题是如何将d-flex和float列表项中的列表居中到左边?任何帮助深表感谢 .
2 回答
您的代码中存在一些问题 .
您无法对齐center
d-flex
,因为它的宽度与其父级的宽度相同 .ul.justify-content-center
不起作用,因为列表不是flex
. 即使您不需要使用它,因为默认情况下,元素在左侧对齐 .出于同样的原因,float-left也是不必要的 .
你不遵循boostrap的网格结构:缺少
col-*
元素您不需要将
d-flex
用于ul
的父级 .如果元素的宽度小于其
d-flex
父元素的宽度,则只能将元素对齐 . 如果是这样,请使用justify-content-center
作为其父级 .解决这个问题的一种方法是
使用
col-*
类作为ul
的父级限制
ul
的宽度 .使用
mx-auto
表示ul
.检查这个https://codepen.io/anon/pen/REwmLN我也使用了其他一些方法 .
要使整个布局居中,并使最后一行保持对齐,请在列表末尾使用4个空间隔元素 . 在这种情况下,你需要正好4个垫片,因为你跨越一行的最大值是5 ....
此外,请确保您使用的是flexbox,而不是浮动 .
https://www.codeply.com/go/jPsNgz6Co8
AFAIK是唯一以中心整个布局为中心的flexbox方式,无论项目数和视口宽度如何,都保持最后一行左对齐 .