Question

我正在使用伪亚马逊风格的结帐页面/表格-左侧一栏中的付款选项，右侧一栏中的小计和提交按钮。问题是，<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测试值，并且用户名是假的，因此屏幕截图中没有安全性问题）：

绝对不是我想要的。

是否可以按我想要的方式拆分表格？

Answer 1

该解决方案实际上非常简单。由于<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>

这样，具有Bootstrap布局类的<div>元素实际上可以正常运行。

Bootstrap 4.3-在各列之间拆分表单

1 个答案: