设备上的水平(柱状)联系人表单7和验收字段

时间:2018-08-01 作者:Alex P.

我想用Contact form 7制作柱状水平表单,但我坚持在不同的设备上使用“acceptance”字段布局。

我使用此CSS来实现我的案例:

.one-half,
.one-third,
.one-fourth {
    position: relative;
    margin-right: 4%;
    float: left;
    margin-bottom: 10px;
}

.one-half { width: 48%; }
.one-third { width: 30.66%; }
.one-fourth {width: 22%;}

.last {
    margin-right: 0 !important;
    clear: right;
}

@media only screen and (max-width: 1024px) {
.one-fourth {
        width: 100%;
        margin-right: 0;
    }
}

@media only screen and (max-width: 767px) {
    .one-half, .one-third {
        width: 100%;
        margin-right: 0;
    }
}

/*Horizontal form only*/
.wpcf-wrap {
    min-height: 90px;
}

div.wpcf7-response-output {
    width: 100%;
    clear: both;
    margin: 0;
}

.wpcf-accept > .wpcf7-form-control-wrap {
    display: inline-block !important;
}
CF7设置上的代码:

<div class="wpcf-wrap">
<div class="one-third">
<label> Your Name (required)
    [text* your-name] </label>
</div>

<div class="one-third">
<label> Your E-mail (required)
    [email* your-email] </label>
</div>
<div class="one-third last">
[submit "Send"]
</div>
<div class="wpcf-accept">
[acceptance acceptance-487] I accept with <a href="/">agreement</a> of the personal data processing [/acceptance]
</div>
</div>
[response]
在桌面上,结果是:enter image description here

在手机上:enter image description here

但我想看看这个:enter image description here

问题是如何逆转<div class="one-third last"><div class="wpcf-accept"> 在小于767px的设备上?

非常感谢!

1 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

你需要一个two-third 列CSS和如下布局:

----------------------------------------------
|         .two-third         |  .one-third   |
----------------------------------------------
|  .one-half  |  .one-half   |               |
-----------------------------|    Submit     |
| Name column | Email column |    button     |
-----------------------------|    column     |
|     Acceptance column      |               |
----------------------------------------------
因此,CSS规则:... 表示您的代码完整)

.one-half,
.one-third,
.two-third, /* Add this */
.one-fourth {
    ...
}

.one-half { width: 48%; }
.one-third { width: 30.66%; }
.two-third { width: 61.32%; }  /* Add this */
.one-fourth {width: 22%;}

...

@media only screen and (max-width: 767px) {
    /* Add the .two-third here, or somewhere else where appropriate based on your
       preferred mobile layout / design. */
    .one-half, .one-third, .two-third {
        ...
    }
}

/*Horizontal form only*/
...

 /* Add this.. */
.wpcf-accept {
  clear: both;
}

...
HTML部分:(为了清晰起见,缩进)

<div class="wpcf-wrap">
  <div class="two-third">
    <div class="one-half">
      <label> Your Name (required)
          [text* your-name] </label>
    </div>

    <div class="one-half last">
      <label> Your E-mail (required)
          [email* your-email] </label>
    </div>

    <div class="wpcf-accept">
      [acceptance acceptance-487] I accept with <a href="/">agreement</a> of
      the personal data processing [/acceptance]
    </div>
  </div><!-- .two-third -->

  <div class="one-third last">
    [submit "Send"]
  </div>
</div>
[response]
尝试演示here.

结束

相关推荐

设备上的水平(柱状)联系人表单7和验收字段 - 小码农CODE - 行之有效找到问题解决它

设备上的水平(柱状)联系人表单7和验收字段

时间:2018-08-01 作者:Alex P.

我想用Contact form 7制作柱状水平表单,但我坚持在不同的设备上使用“acceptance”字段布局。

我使用此CSS来实现我的案例:

.one-half,
.one-third,
.one-fourth {
    position: relative;
    margin-right: 4%;
    float: left;
    margin-bottom: 10px;
}

.one-half { width: 48%; }
.one-third { width: 30.66%; }
.one-fourth {width: 22%;}

.last {
    margin-right: 0 !important;
    clear: right;
}

@media only screen and (max-width: 1024px) {
.one-fourth {
        width: 100%;
        margin-right: 0;
    }
}

@media only screen and (max-width: 767px) {
    .one-half, .one-third {
        width: 100%;
        margin-right: 0;
    }
}

/*Horizontal form only*/
.wpcf-wrap {
    min-height: 90px;
}

div.wpcf7-response-output {
    width: 100%;
    clear: both;
    margin: 0;
}

.wpcf-accept > .wpcf7-form-control-wrap {
    display: inline-block !important;
}
CF7设置上的代码:

<div class="wpcf-wrap">
<div class="one-third">
<label> Your Name (required)
    [text* your-name] </label>
</div>

<div class="one-third">
<label> Your E-mail (required)
    [email* your-email] </label>
</div>
<div class="one-third last">
[submit "Send"]
</div>
<div class="wpcf-accept">
[acceptance acceptance-487] I accept with <a href="/">agreement</a> of the personal data processing [/acceptance]
</div>
</div>
[response]
在桌面上,结果是:enter image description here

在手机上:enter image description here

但我想看看这个:enter image description here

问题是如何逆转<div class="one-third last"><div class="wpcf-accept"> 在小于767px的设备上?

非常感谢!

1 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

你需要一个two-third 列CSS和如下布局:

----------------------------------------------
|         .two-third         |  .one-third   |
----------------------------------------------
|  .one-half  |  .one-half   |               |
-----------------------------|    Submit     |
| Name column | Email column |    button     |
-----------------------------|    column     |
|     Acceptance column      |               |
----------------------------------------------
因此,CSS规则:... 表示您的代码完整)

.one-half,
.one-third,
.two-third, /* Add this */
.one-fourth {
    ...
}

.one-half { width: 48%; }
.one-third { width: 30.66%; }
.two-third { width: 61.32%; }  /* Add this */
.one-fourth {width: 22%;}

...

@media only screen and (max-width: 767px) {
    /* Add the .two-third here, or somewhere else where appropriate based on your
       preferred mobile layout / design. */
    .one-half, .one-third, .two-third {
        ...
    }
}

/*Horizontal form only*/
...

 /* Add this.. */
.wpcf-accept {
  clear: both;
}

...
HTML部分:(为了清晰起见,缩进)

<div class="wpcf-wrap">
  <div class="two-third">
    <div class="one-half">
      <label> Your Name (required)
          [text* your-name] </label>
    </div>

    <div class="one-half last">
      <label> Your E-mail (required)
          [email* your-email] </label>
    </div>

    <div class="wpcf-accept">
      [acceptance acceptance-487] I accept with <a href="/">agreement</a> of
      the personal data processing [/acceptance]
    </div>
  </div><!-- .two-third -->

  <div class="one-third last">
    [submit "Send"]
  </div>
</div>
[response]
尝试演示here.

相关推荐