带有输入字段的按钮不想与右上角对齐答案

【问题标题】：Button with input field doesn't want to align to the right corner带有输入字段的按钮不想与右上角对齐
【发布时间】：2020-12-21 15:18:56
【问题描述】：

我正在尝试在按钮“添加到购物车”上使用class=float-right，但它无法正常工作。为了说明问题，我增加了卡片的宽度。 “添加到购物车” 按钮粘在 “描述” 按钮上，并且未向右对齐。我们如何将带有输入字段的“添加到购物车”按钮移到右上角？

jsfiddle 的示例： https://jsfiddle.net/cvrg5ep0/

<html lang="eng">
<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
        rel="stylesheet" media="screen"/>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>

<body>
      <div class="card" style="width: 50rem; height: 28rem;"> <!-- width: 25rem -->
        <div class="view overlay">
          <img class="card-img-top" src="https://cdn.pixabay.com/photo/2018/10/05/23/24/chicken-3727097_1280.jpg"
               style="width: 25rem; height : 18rem;" alt="Card image cap">
          <div class="mask rgba-white-slight"></div>
        </div>

        <div class="card-body">
          <div class="p-2">
            <div class="float-right">
              <h3 class="card-title"><span> 5000</span> $</h3>
            </div>
            <h2 class="card-title"><span>Chicken</span></h2>

            <div class="row">

              <form th:action="@{/products/{id}(id=${product.id})}" method="get">
                <button type="submit" class="btn btn-light-blue">Description</button>
              </form>

              <div class="float-right">
                <form class="add-prod-to-cart">
                  <div class="input-group">
                    <input type="hidden" class="product-id" th:value="${product.id}">
                    <input type="number" value="1" min="1"
                           class="product-quantity form-control col-md-3">
                    <div class="input-group-append">
                      <button type="submit" class="btn btn-danger">Add to cart</button>
                    </div>
                  </div>
                </form>
              </div>

            </div>
          </div>
        </div> <!-- card-body -->
      </div> <!-- card -->
</body>

</html>

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 thymeleaf

【解决方案1】：

您能否检查以下代码，希望它对您有用。 “float-right”将无法正常工作，因为它的父级是“row”，所以我们需要通过它的 flex 实用程序类进行管理，为此我们添加了“justify-content-between”类并删除了列类“col-md -3" 来自“product-quantity”，而不是它，我们给出了一个内联样式。

请参考此链接。 https://jsfiddle.net/c1qusLoy/

    <div class="card-body">
      <div class="p-2">
        <div class="float-right">
          <h3 class="card-title"><span> 5000</span> $</h3>
        </div>
        <h2 class="card-title"><span>Chicken</span></h2>

        <div class="row justify-content-between">

          <form th:action="@{/products/{id}(id=${product.id})}" method="get">
            <button type="submit" class="btn btn-light-blue">Description</button>
          </form>

          <div class="float-right">
            <form class="add-prod-to-cart">
              <div class="input-group">
                <input type="hidden" class="product-id" th:value="${product.id}">
                <input type="number" value="1" min="1"
                       class="product-quantity form-control" style="width: 90px">
                <div class="input-group-append">
                  <button type="submit" class="btn btn-danger">Add to cart</button>
                </div>
              </div>
            </form>
          </div>

        </div>
      </div>
    </div> <!-- card-body -->
  </div> <!-- card -->`

【讨论】：