Bootstrap 4 在 col div 内对齐元素 [英] Bootstrap 4 align elements right inside a col div

查看：12
本文介绍了Bootstrap 4 在 col div 内对齐元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的问题很简单，但我没有找到在 Bootstrap 4 中实现这一点的正确方法(我的意思是不使用相对位置容器内的子元素的绝对定位).

我有一排带有 col-8 和 col-4.我在 col-4 中的内容必须右对齐，以便其内容位于右边框.

应用组合
<div class="btn-group col-md-4" role="group"><p class="float-right"><a class="btn btn-secondary btn-md" href="#"><i class="fa fa-plus" aria-hidden="true"></i>创建<a class="btn btn-md btn-secondary" href="#"><i class="fa fa-flag" aria-hidden="true"></i>报告</p>

这是一个代码笔:

https://codepen.io/anon/pen/QpzVgJ

我希望我的两个按钮在 col-4 中右对齐.

如何在 Bootstrap 4 中正确对齐列中的正确元素?

解决方案

使用 ml-auto 将按钮推到右边...

https://codepen.io/anon/pen/evbLQN

<p class="ml-auto"><a class="btn btn-secondary btn-md" href="#"><i class="fa fa-plus" aria-hidden="true"></i>创建<a class="btn btn-md btn-secondary" href="#"><i class="fa fa-flag" aria-hidden="true"></i>报告</p>

另一种选择是从 col-md-4 中删除 btn-group，然后 float-right 将按预期工作.pull-right 类在 Bootstrap 4 中被 float-right 取代.

<h1 class="col-md-8">应用组合</h1><div class="col-md-4" role="group"><p class="float-right"><a class="btn btn-secondary btn-md" href="#"><i class="fa fa-plus" aria-hidden="true"></i>创建<a class="btn btn-md btn-secondary" href="#"><i class="fa fa-flag" aria-hidden="true"></i>报告</p>

</节>

<小时>

PS - 为了防止在 Codepen 中出现水平滚动条，请确保将 .row 放在 container-fluid 中.此外，一般 col-* 用于包含内容，不应应用于其他组件/元素.因此，例如，如果您想使用 btn-group..

<section class="row"><div class="col-md-8"><h1>应用组合</h1>
<div class="col-md-4"><div class="btn-group float-right mt-2" role="group"><a class="btn btn-secondary btn-md" href="#"><i class="fa fa-plus" aria-hidden="true"></i>创建<a class="btn btn-md btn-secondary" href="#"><i class="fa fa-flag" aria-hidden="true"></i>报告

</节>

http://www.codeply.com/go/8OYDK5D8Db

<小时>

相关:将 div 类中的元素右对齐引导程序 4

My question is pretty simple but I don't find a proper way (I mean not use absolute positionning of sub elements inside a relative position container) to achieve this in Bootstrap 4.

I have a row with a col-8 and a col-4. My content in col-4 must be right aligned so its content is at the right border.

<h1 class="col-md-8">Applications portfolio</h1>

  <div class="btn-group col-md-4" role="group">
    <p class="float-right">
      <a class="btn btn-secondary btn-md" href="#">
        <i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
      <a class="btn btn-md btn-secondary" href="#">
        <i class="fa fa-flag" aria-hidden="true"></i> Report</a>
    </p>
  </div>

Here is a codepen:

https://codepen.io/anon/pen/QpzVgJ

I want my two buttons to right align within the col-4.

How in Bootstrap 4 to properly align right elements within a col?

解决方案

Use ml-auto to push the buttons to the right...

https://codepen.io/anon/pen/evbLQN

<div class="btn-group col-md-4" role="group">
    <p class="ml-auto">
      <a class="btn btn-secondary btn-md" href="#">
        <i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
      <a class="btn btn-md btn-secondary" href="#">
        <i class="fa fa-flag" aria-hidden="true"></i> Report</a>
    </p>
</div>

Another option is to remove the btn-group from the col-md-4, and then float-right will work as expected. The pull-right class was replaced by float-right in Bootstrap 4.

<section class="row">
  <h1 class="col-md-8">Applications portfolio</h1>

  <div class="col-md-4" role="group">
    <p class="float-right">
      <a class="btn btn-secondary btn-md" href="#">
        <i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
      <a class="btn btn-md btn-secondary" href="#">
        <i class="fa fa-flag" aria-hidden="true"></i> Report</a>
    </p>
  </div>
</section>

PS - To prevent the horizontal scrollbar visible in your Codepen, make sure the .row is placed inside a container-fluid. Also, generally col-* are used to contain content, and shouldn't be applied to other components/elements. So, for example if you wanted to use the btn-group..

<div class="container-fluid">
    <section class="row">
        <div class="col-md-8">
            <h1>Applications portfolio</h1>
        </div>
        <div class="col-md-4">
            <div class="btn-group float-right mt-2" role="group">
                <a class="btn btn-secondary btn-md" href="#">
                    <i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
                <a class="btn btn-md btn-secondary" href="#">
                    <i class="fa fa-flag" aria-hidden="true"></i> Report</a>
            </div>
        </div>
    </section>
</div>

http://www.codeply.com/go/8OYDK5D8Db

Related: Right align element in div class with bootstrap 4

这篇关于Bootstrap 4 在 col div 内对齐元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆