Bootstrap 4.3 - разбиение формы по столбцам - PullRequest
Новая
       25

Bootstrap 4.3 - разбиение формы по столбцам

2 голосов
/ 02 апреля 2019

Я работаю над страницей / формой оформления заказа в псевдо-Amazon стиле - варианты оплаты в столбце слева, промежуточный итог и кнопка отправки в столбце справа.Проблема в том, что элемент <form> является блочным элементом, что вызывает некоторые реальные проблемы с моим макетом.Шаблон моей текущей страницы (Twig): 

{% extends 'base.html.twig' %}

{% block content %}
    <div class="row">
        <form action="{{ url('_checkout') }}" method="post">
            <div class="offset-md-1 col-md-7 mt-4 mb-5">
                <h2>Select Payment Option:</h2>

                {% for key, choice in choices %}
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="card" id="card{{ loop.index }}" value="{{ choice }}">
                        <label class="form-check-label" for="card{{ loop.index }}">{{ key }}</label>
                    </div>
                {% endfor %}
            </div>
            <div class="offset-md-1 col-md-2 mt-4 mb-5">
                <button type="submit" class="btn btn-burnt-orange">Place Your Order</button>
                <input type="hidden" name="token" value="{{ csrf_token('somesecretvalue') }}">
            </div>
        </form>
    </div>
{% endblock content %}

CSS - это базовый Bootstrap с пользовательским цветом для кнопки «Отправить».

Результат выглядит следующим образом (значения CC - это значения теста Stripe, аимя пользователя - фальшивка, поэтому на скриншоте нет проблем с безопасностью):

enter image description here

Это определенно не то, что я хочу.

Можно ли разделить форму так, как я хочу?

1 Ответ

1 голос
/ 05 апреля 2019

Решение было действительно очень простым. Поскольку <form> является блочным элементом, он ограничивает то, что внутри него. Поскольку классы макета Bootstrap зависят от тех элементов, которые будут помещены в содержащий элемент с классом row, наличие только элемента <form> означает, что они не будут работать. Решение состоит в том, чтобы удалить контейнер <div>, поскольку в этом контексте он является излишним, и вместо него просто укажите <form> класс row: 

<form class="row" action="{{ url('_checkout') }}" method="post">
    <div class="offset-md-1 col-md-7 mt-4 mb-5">
        <h2>Select Payment Option:</h2>

        {% for key, choice in choices %}
            <div class="form-check">
                <input class="form-check-input" type="radio" name="card" id="card{{ loop.index }}" value="{{ choice }}">
                <label class="form-check-label" for="card{{ loop.index }}">{{ key }}</label>
            </div>
        {% endfor %}
    </div>
    <div class="offset-md-1 col-md-2 mt-4 mb-5">
        <button type="submit" class="btn btn-burnt-orange">Place Your Order</button>
        <input type="hidden" name="token" value="{{ csrf_token('checkout') }}">
        {# TODO: figure this out - display subtotal and 'Place Your Order' button #}
    </div>
</form>

Таким образом, элементы <div>, которые имеют классы макетов Bootstrap, действительно ведут себя правильно.

...