且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

右对齐

更新时间:2023-12-04 12:48:28

float-right 用于块元素,或将 text-right 用于内联元素:

<div class="row">
     <div class="col">left</div>
     <div class="col text-right">inline content needs to be right aligned</div>
</div>
<div class="row">
      <div class="col">left</div>
      <div class="col">
          <div class="float-right">element needs to be right aligned</div>
      </div>
</div>

http://www.codeply.com/go/oPTBdCw1JV

如果float-right不起作用,请记住, Bootstrap 4现在是flexbox ,并且许多元素都是display:flex,可以阻止float-right工作./p>

在某些情况下,实用程序类(例如 align-self-end ml-auto )用于使Flexbox容器(如Bootstrap 4 .row)中的元素右对齐.卡或导航ml-auto(margin-left:auto)用于flexbox元素中,以将元素向右推.

引导程序4对齐正确的示例

I'm trying to create a row with 2 cols. One col on the left with its contents aligned left, and the second col with its contents aligned right (old pull-right).

How to do I go about this in alpha-6?

I've tried a few things, but this is what I have so far. What am I missing?

<div class="row">
    <div class="col">left</div>
    <div class="col ml-auto">content needs to be right aligned</div>
</div>

Use float-right for block elements, or text-right for inline elements:

<div class="row">
     <div class="col">left</div>
     <div class="col text-right">inline content needs to be right aligned</div>
</div>
<div class="row">
      <div class="col">left</div>
      <div class="col">
          <div class="float-right">element needs to be right aligned</div>
      </div>
</div>

http://www.codeply.com/go/oPTBdCw1JV

If float-right is not working, remember that Bootstrap 4 is now flexbox, and many elements are display:flex which can prevent float-right from working.

In some cases, the utility classes like align-self-end or ml-auto work to right align elements that are inside a flexbox container like the Bootstrap 4 .row, Card or Nav. The ml-auto (margin-left:auto) is used in a flexbox element to push elements to the right.

Bootstrap 4 align right examples