Кнопка с полем ввода не хочет выравниваться по правому углу

Я пытаюсь использовать 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

13.12.2020 14:26

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 -->`

14.12.2020 08:33

Другие вопросы по теме

Создайте анимацию постепенного появления / исчезновения на фоновых изображениях, измените CSS в ответ

Открыть новый кран HTML в Chrome с определенной шириной и высотой

Как я могу масштабировать строки изображений внутри div

JQuery addClass работает, но javascript classList.add не работает

Изменение цвета фона с помощью оператора else if - JQuery

Контейнер Flexbox не включает margin-bottom

Как расположить заголовок раздела так, чтобы он плавал прямо на карточке

Bootstrap выровняет svg по центру заголовка

Добавление изображения логотипа рядом с текстом в div с использованием html и css

Когда динамически добавленный div удаляется, последний созданный div следует за ним

Кнопка с полем ввода не хочет выравниваться по правому углу

Ответы 1

Другие вопросы по теме

Похожие вопросы