引导4 col与ml-auto对齐
引导4 col与ml-auto对齐
提问于 2019-04-15 20:47:37
我想将导航对齐到右边，但是使用.ml-auto和.d-flex是行不通的，我也不明白为什么。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="panel-form">
<div class="row">
<div class="col-lg-3">
<form action="">
<input type="text" placeholder="Искать по имени" class="form-control">
</form>
</div>
<div class="col-lg-9"
<ul class="nav nav-pills justify-content-end">
<li class="nav-item pl-4"><a href="#" class="nav-link active">Active</a></li>
<li class="nav-item pl-4"><a href="#" class="nav-link">Link</a></li>
<li class="nav-item pl-4"><a href="#" class="nav-link">Link</a></li>
<li class="nav-item pl-4"><a href="#" tabindex="-1" aria-disabled="true" class="nav-link disabled">Disabled</a></li>
</ul>
</div>
</div>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-04-15 21:03:15
如果检查元素，列之间没有“空”空间来添加页边距，因为两列都使用完整的12个插槽；相反，您应该将ml-auto类放置在ul元素中，该元素没有使用完全可用的宽度，可以移动到其父元素中；
另一种选择是实际使用Bootstrap提供的flex实用程序来调整和调整flex容器中的内容。
编辑：，因为您需要的是保持输入的大小；您可以将该列设置为col-auto，这将使该列只使用包含其元素所需的空间；然后在另一列中，您可以使用col，这样它就可以使用所有剩余的空间，而不必设置特定数量的插槽；最后，您可以再次使用ul元素上的justify-content-end之类的flex实用工具，这样它就可以停留在右侧。
有许多选项可以将大小应用于列，请阅读网格系统
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="panel-form">
<div class="row justify-content-between">
<div class="col-auto">
<form action="">
<input type="text" placeholder="Искать по имени" class="form-control">
</form>
</div>
<div class="col">
<ul class="nav nav-pills justify-content-end flex-nowrap">
<li class="nav-item pl-4"><a href="#" class="nav-link active">Active</a></li>
<li class="nav-item pl-4"><a href="#" class="nav-link">Link</a></li>
<li class="nav-item pl-4"><a href="#" class="nav-link">Link</a></li>
<li class="nav-item pl-4"><a href="#" tabindex="-1" aria-disabled="true" class="nav-link disabled">Disabled</a></li>
</ul>
</div>
</div>
</div>
Stack Overflow用户
发布于 2019-04-15 21:00:52
由于引导4.x已经将Flexbox布局应用于其导航组件，所以您需要依赖面向Flexbox的对齐实用程序。对于所描述的行为，您只需选择一个额外的类：justify-content-end
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<ul class="nav nav-pills justify-content-end">
<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
</ul>
引导程序4.x有许多不同的对齐实用程序，它们最适合于Flexbox或更基本的位置。我强烈建议查看验证和调整Flexbox内容的文档
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55697020
复制相关文章
相似问题
腾讯云开发者
