Bootstrap 如何将列与文本和输入右对齐？

fdx2calv 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(1)|浏览(374)

我正在将一个使用bootstrap 3的项目升级到bootstrap 5。我有包含文本和输入的列，我需要将它们与列的右侧对齐。我在Bootstrap 5中找不到正确的方法来使其工作。
Bootstrap 电流3：

<div class="row">
<div class="col-xs-12 text-right">
Text:&nbsp;
<input class="form-control" maxlength="12" style="width:130px;display:inline-block;" type="text" value="0.00">
</div>
</div>

将上面的HTML更改为Bootstrap 5，我目前有以下不工作：

<div class="row">
<div class="col-12 d-flex float-end">
Text:&nbsp;
<input class="form-control" maxlength="12" style="width:130px;" type="text" value="0.00">
</div>
</div>

jsFiddle中的代码：https://jsfiddle.net/korazy8s/o2wyz64u/36/

twitter-bootstrap

来源：https://stackoverflow.com/questions/74779593/how-can-i-right-align-column-with-text-and-input

1条答案

按热度按时间

gcuhipw91#

有几种方法可以做到这一点，你可以在col的子元素上使用margin-left auto，或者你可以只使用flexbox justify-content end（右）。
下面是一个示例，我将您的float-end替换为justify-content-end：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container pt-3 m-0">
  <div class="row">
    <div class="col-3">NOT_IMPORTANT</div>

    <!-- I want the contents in this column to be:
     right aligned and single line
-->
    <div class="col-9 border p-1 justify-content-end d-flex">
      <span class="pt-1 pb-1 me-2">Name:</span>
      <div class="input-group" style="max-width: 200px;">
        <span class="input-group-text pt-1 pb-1">$</span>
        <input class="form-control pt-1 pb-1" maxlength="12" value="0.00">
      </div>

    </div>
  </div>

  <div class="row">
    <div class="col-12 d-flex text-right">
      Text:&nbsp;
      <input class="form-control" maxlength="12" style="width:130px;" type="text" value="0.00">
    </div>
  </div>

</div>

赞(0）回复(0）举报 2022-12-16

我来回答

Bootstrap 如何将列与文本和输入右对齐？

1条答案

相关问题

热门标签

最新问答