Блог

Я пытаюсь воспроизвести эту форму:

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

Использование начальной загрузки 4 (нет Flexbox из-за необходимости IE11):

Я застрял.

Вот мой код:

 <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 grid, но я понимаю основные концепции. У меня есть метки и входные данные, выровненные так, как я хочу, но я не могу понять, как расположить все по центру и через промежутки, как в примере.

Обратите внимание, встроенные значения, например {{ .Сайт.Данные.контакт.факс }} заполняются системой Hugo static site generator. Кроме того, есть элемент формы, обертывающий этот контейнер, но я не думаю, что это должно иметь значение для демонстрации проблемы.

Спасибо

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

Я протестировал приведенный ниже код, и он предоставляет макет, аналогичный тому, что вам нужно.

 <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>