简单的引导表单

Question

我正在尝试重现这种形式：

https://themes.gohugo.io//theme/hugo-terrassa-theme/contact

使用 Bootstrap 4（由于需要 IE11 而没有 Flexbox）：

我被困住了。

这是我的代码：

<div class="container ">
        <div class="row">
            <div class="form-group ">
                <!-- Name -->
                <label class="control-label" for="{{ $.Site.Params.form.inputNameName }}">
                    {{ $.Site.Params.form.inputNameLabel }}</label>
                <div>
                    <input class="form-control" type="text" name="{{ $.Site.Params.form.inputNameName }}"
                           placeholder="{{ $.Site.Params.form.inputNamePlaceholder }}"
                           id="{{ $.Site.Params.form.inputNameName }}"
                           aria-labelledby="{{ $.Site.Params.form.inputNameName }}" required>
                </div>
            </div>

            <div class="form-group ">
                <!-- Email -->
                <label class="control-label" for="{{ $.Site.Params.form.inputEmailName }}">
                    {{ $.Site.Params.form.inputEmailLabel }}</label>
                <div>
                    <input class="form-control" type="email" name="{{ $.Site.Params.form.inputEmailName }}"
                           placeholder="{{ $.Site.Params.form.inputEmailPlaceholder }}"
                           id="{{ $.Site.Params.form.inputEmailName }}"
                           aria-labelledby="{{ $.Site.Params.form.InputEmailName }}" required>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="form-group col">
                <!-- Message -->
                <label class="control-label" for="{{ $.Site.Params.form.inputMsgName }}">
                    {{ $.Site.Params.form.inputMsgLabel }}</label>
                <div>
                <textarea class="form-control" name="{{ $.Site.Params.form.inputMsgName }}"
                          id="{{ $.Site.Params.form.inputMsgName }}" form="contactForm"
                          maxlength="{{ $.Site.Params.form.inputMsgLength }}" id="{{ $.Site.Params.form.inputMsgName }}"
                          arial-labelledby="{{ $.Site.Params.form.InputMsgName }}" required></textarea>
                </div>
            </div>
        </div>

        <!-- Submit -->
        <a class="button" href="javascript:cleanForm" aria-label="{{ $.Site.Params.form.inputSubmitValue }}">
            {{ $.Site.Params.form.inputSubmitValue }}
        </a>

    <h6 class="text-center">
        <strong>Phone </strong>{{ .Site.Data.contact.phone }}
        <strong>Fax </strong>{{ .Site.Data.contact.fax }}
    </h6>
</div>

我对 Bootstrap 网格有些陌生，但我了解基本概念。我已经将标签和输入按照我想要的方式对齐，但我不知道如何像示例一样让事物居中和间隔。

注意，嵌入的值，例如{{ .Site.Data.contact.fax }} 正在被 Hugo 静态站点生成器系统填充。此外，还有一个表单元素包装了这个容器，但我认为这对于证明问题并不重要。

谢谢

Answer 1

您需要使用引导程序grid system 并使用一系列行和列来实现您的布局。

我已经测试了下面的代码，它提供了一个类似于您需要的布局。

<div class="container ">
    <div class="row">
        <div class="col-6 form-group">
            <!-- Name -->
            <label class="control-label" for="{{ $.Site.Params.form.inputNameName }}">{{ $.Site.Params.form.inputNameLabel }}</label>
                <input class="form-control" type="text" name="{{ $.Site.Params.form.inputNameName }}" placeholder="{{ $.Site.Params.form.inputNamePlaceholder }}" id="{{ $.Site.Params.form.inputNameName }}" aria-labelledby="{{ $.Site.Params.form.inputNameName }}" required>
        </div>

        <div class="col-6 form-group">
            <!-- Email -->
            <label class="control-label" for="{{ $.Site.Params.form.inputEmailName }}">{{ $.Site.Params.form.inputEmailLabel }}</label>
            <input class="form-control" type="email" name="{{ $.Site.Params.form.inputEmailName }}" placeholder="{{ $.Site.Params.form.inputEmailPlaceholder }}" id="{{ $.Site.Params.form.inputEmailName }}" aria-labelledby="{{ $.Site.Params.form.InputEmailName }}" required>
        </div>
    </div>

    <div class="row">
        <div class="col-12 form-group">
            <!-- Message -->
            <label class="control-label" for="{{ $.Site.Params.form.inputMsgName }}">{{ $.Site.Params.form.inputMsgLabel }}</label>
            <textarea class="form-control" name="{{ $.Site.Params.form.inputMsgName }}" id="{{ $.Site.Params.form.inputMsgName }}" form="contactForm" maxlength="{{ $.Site.Params.form.inputMsgLength }}" id="{{ $.Site.Params.form.inputMsgName }}" arial-labelledby="{{ $.Site.Params.form.InputMsgName }}" required></textarea>
        </div>
    </div>

    <!-- Submit -->
    <div class="row">
        <div class="col-12 form-group text-center">
            <button type="submit" class="btn btn-primary" href="javascript:cleanForm" aria-label="{{ $.Site.Params.form.inputSubmitValue }}">{{ $.Site.Params.form.inputSubmitValue }}</button>
        </div>
    </div>

    <h6 class="text-center">
        <strong>Phone </strong>{{ .Site.Data.contact.phone }}
        <strong>Fax </strong>{{ .Site.Data.contact.fax }}
    </h6>
</div>