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，并使用一系列行和列来实现布局。

我已经测试了以下代码，它提供的布局与您所需的布局相似。

{{1}}

简单的引导表格

1 个答案: