CSS Контактная форма 7 Интервал

Question

Я не могу на всю жизнь определить интервал в моей форме.

Как вы увидите, все флажки сгруппированы и выглядят как руби sh ... можете ли вы помогают легенды кодирования?

http://200620.co.uk/

Это макет ...

    <div class="wpcf7-wrap">
<div class="col-sm-6">
     [text* your-name placeholder "Name:"]
  </div>

<div class="col-sm-6">
     [text* your-email placeholder "Email:"]
  </div>

<div class="col-sm-6">
     [select* menu-383 placeholder "Are you coming?" "I'm there" "No, sorry"]
  </div>  

<div class="col-sm-6">
     [select* menu-384 placeholder "Transport there & back?" "There" "Back" "Both"]
  </div>

<div class="col-sm-6">
     [text your-text-1 placeholder "Dietary Requirements:"]
  </div>

<div class="col-sm-6">What do you drink?
[checkbox checkbox-133 label_first use_label_element "Gin" "Vodka" "Whiskey" "Rum" "Prosecco" "Soft Drinks"]
</div>

<div class="col-sm-6">
     [text your-text-3 placeholder "What do you want to hear?"]
  </div>

<div class="col-sm-12">
     [textarea your-text-4 placeholder "Any Special Message for us?"]
  </div>

  <div class="col-xs-12 wpcf7-button-wrap">
    [submit "RSVP Baby"]
  </div>
</div>

Answer 1

Надеюсь, это поставит вас на правильный путь. Я бы переместил ваши чекбоксы после других столбцов 2х2, чтобы они были на всем пути. Также .. Оберните все это в div. Будьте осторожны, чтобы не добавлять дополнительные разрывы строк в вашу форму, так как Контактная форма 7 использует функцию «Auto-P».

/*this should make the row stand on it's own*/
.checkbox-row {
  margin: 1.5rem 0 .5rem 0;
}

<div class="wpcf7-wrap">
    <div class="col-sm-6"> [text* your-name placeholder "Name:"] </div>
    <div class="col-sm-6"> [text* your-email placeholder "Email:"] </div>
    <div class="col-sm-6"> [select* menu-383 placeholder "Are you coming?" "I'm there" "No, sorry"] </div>
    <div class="col-sm-6"> [select* menu-384 placeholder "Transport there & back?" "There" "Back" "Both"] </div>
    <div class="col-sm-6"> [text your-text-1 placeholder "Dietary Requirements:"] </div>
    <div class="col-sm-6"> [text your-text-3 placeholder "What do you want to hear?"] </div>
    <div class="col-sm-12 checkbox-row"><div>What do you drink? [checkbox checkbox-133 label_first use_label_element "Gin" "Vodka" "Whiskey" "Rum" "Prosecco" "Soft Drinks"]</div></div>
    <div class="col-sm-12"> [textarea your-text-4 placeholder "Any Special Message for us?"] </div>
    <div class="col-xs-12 wpcf7-button-wrap"> [submit "RSVP Baby"] </div>
</div>

Answer 2

Просто добавьте ниже CSS код. Надеюсь, это поможет вам.

.wpcf7-form-control.wpcf7-checkbox{
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
}