使用Bootstrap

时间：2016-03-17 10:30:59

标签： html css twitter-bootstrap

如何以课程订阅表格为中心 - 使用Bootstrap 。

直播网站： http://185.123.96.102/~kidsdrum/moneynest.co.uk/

目前： enter image description here

预期结果： enter image description here

HTML 

<div class="text-center">
    <h1 class="boldme hidden-xs hidden-sm">Wish you were taught personal finance at school? We do too</h1> 
    <div class="greenpromobox"> 
    <h2 class="boldme">Aged 20-30 and frustrated with money?</h2>

     <h3 class="boldme">Take our free <b class="jumpstarttext">Jumpstart Your Finances</b> class to<br /> secure your financial future</h3>

<script src="https://app.convertkit.com/assets/CKJS4.js?v=21"></script>
<div class="ck_form ck_naked">

  <div class="ck_form_fields">

    <div id='ck_success_msg'  style='display:none;'>
      <p>Success! </p>
    </div>

    <!--  Form starts here  -->
    <form id="ck_subscribe_form" class="ck_subscribe_form" action="https://app.convertkit.com/landing_pages/32973/subscribe" data-remote="true">
      <input type="hidden" value="{&quot;form_style&quot;:&quot;naked&quot;,&quot;embed_style&quot;:&quot;inline&quot;,&quot;embed_trigger&quot;:&quot;scroll_percentage&quot;,&quot;scroll_percentage&quot;:&quot;70&quot;,&quot;delay_seconds&quot;:&quot;10&quot;,&quot;display_position&quot;:&quot;br&quot;,&quot;display_devices&quot;:&quot;all&quot;,&quot;days_no_show&quot;:&quot;15&quot;,&quot;converted_behavior&quot;:&quot;show&quot;}" id="ck_form_options">
      <input type="hidden" name="id" value="32973" id="landing_page_id">
      <div class="ck_errorArea">
        <div id="ck_error_msg" style="display:none">
          <p>There was an error submitting your subscription. Please try again.</p>
        </div>
      </div>
      <div class="ck_control_group ck_email_field_group">
                                   <label class="ck_label" for="ck_emailField" style="display: none">Email Address</label>
                   <input type="email" name="email" class="ck_email_address" id="ck_emailField" placeholder="Enter your email" required autofocus>
      </div>

      <button class="subscribe_button ck_subscribe_button btn fields text-uppercase" id='ck_subscribe_button'>
        Start Class Now
      </button>
    </form>
  </div>

 </div>


</div>
</div>

CSS 

 /* Layout */
  .ck_form.ck_naked {
  /* divider image */
    background: transparent;
    line-height: 1.5em;
    overflow: hidden;
    color: #666;
    font-size: 16px;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    clear: both;
    margin: 0 0 0 0;
}

.ck_form.ck_naked p {
    padding: 0px;
}

.ck_form, .ck_form * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ck_form.ck_naked .ck_form_fields {
    width: 100%;
    float: left;
    padding: 5%;
        padding-bottom: 1.5%;
}
/* Form fields */

.ck_errorArea {
    display: none; /* temporary */
}

#ck_success_msg {
    padding: 10px 10px 0px;
    border: solid 1px #ddd;
    background: #eee;
}

.ck_form.ck_naked input[type="text"], .ck_form.ck_naked input[type="email"] {
    font-size: 18px;
    padding: 10px 8px;
    width: 34%;
    border: 1px solid #d6d6d6; /* stroke */
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px; /* border radius */
    background-color: #fff; /* layer fill content */
    margin-bottom: 5px;
    height: auto;
    float: left;
    margin: 0px;
    margin-right: 1%;
    height: 42px;
}

.ck_form input[type="text"]:focus, .ck_form input[type="email"]:focus {
    outline: none;
    border-color: #aaa;
}

.ck_form.ck_naked .ck_subscribe_button {
    width: 100%;
    color: #fff;
    margin: 0px;
    padding:  9px 0px;
    font-size: 18px;
    background: #0d6db8;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px; /* border radius */
    cursor: pointer;
    border: none;
    text-shadow: none;
    width: 30%;
    float: left;
    height: 42px;
  }

.ck_form.ck_naked .ck_subscribe_button:hover { 
       background: #3d8ac6;

  }

.ck_converted_content {
  display: none;
    padding: 5%;
    background: #3d8ac6;
}

/* max width 500 */

    .ck_form.ck_naked.width500 .ck_subscribe_button {
        width: 100%;
        float: none;
        margin-top: 5px;
    }

    .ck_form.ck_naked.width500 input[type="text"], .ck_form.ck_naked.width500 input[type="email"] {
        width: 49%;
    }

    .ck_form.ck_naked.width500 input[type="email"] {
        margin-right: 0px;
        width: 50%;
    }

/* max width 400 */

    .ck_form.ck_naked.width400 .ck_subscribe_button, .ck_form.ck_naked.width400 input[type="text"], .ck_form.ck_naked.width400 input[type="email"] {
        width: 100%;
        float: none;
        margin-top: 5px;
    }

.ck_slide_up, .ck_modal, .ck_slide_up .ck_naked, .ck_modal .ck_naked  {
    min-width: 400px;
}

.page .ck_form.ck_naked {
    margin: 50px auto;
    max-width: 700px;
}

我最近从MailChimp切换到了ConverKit，它给了我大量代码可以粘贴。我可以轻松地以位置为中心：相对但在移动设备上查看时会出现偏差。

2 个答案:

答案 0 :(得分：1)

尝试使用此代码

我已经对您的HTML和CSS做了一些更改，希望这对您有用。

<强> HTML 

<div class="ck_form ck_naked ck_horizontal">

  <div class="ck_form_fields">

    <div id="ck_success_msg" style="display:none;">
      <p>Success! </p>
    </div>

    <!--  Form starts here  -->
    <form id="ck_subscribe_form" class="ck_subscribe_form" action="https://app.convertkit.com/landing_pages/32973/subscribe" data-remote="true">
      <input value="{&quot;form_style&quot;:&quot;naked&quot;,&quot;embed_style&quot;:&quot;inline&quot;,&quot;embed_trigger&quot;:&quot;scroll_percentage&quot;,&quot;scroll_percentage&quot;:&quot;70&quot;,&quot;delay_seconds&quot;:&quot;10&quot;,&quot;display_position&quot;:&quot;br&quot;,&quot;display_devices&quot;:&quot;all&quot;,&quot;days_no_show&quot;:&quot;15&quot;,&quot;converted_behavior&quot;:&quot;show&quot;}" id="ck_form_options" type="hidden">
      <input name="id" value="32973" id="landing_page_id" type="hidden">
      <div class="ck_errorArea">
        <div id="ck_error_msg" style="display:none">
          <p>There was an error submitting your subscription. Please try again.</p>
        </div>
      </div>
      <div class="ck_control_group ck_email_field_group">
                                   <label class="ck_label" for="ck_emailField" style="display: none">Email Address</label>
  <div class="col-md-8 col-md-offset-2" style="padding: 0px;">  
  <div class="subscription-section">

  <div style="padding-right: 0px;" class="col-md-6"><input name="email" class="ck_email_address" id="ck_emailField" placeholder="Enter your email" required="" autofocus="" type="email"></div>
      <div class="col-md-6"><button class="btn-block subscribe_button ck_subscribe_button btn fields text-uppercase" id="ck_subscribe_button">
        Start Class Now
  </button></div>
  </div></div></div>


    </form>
  </div>

 </div>

<强> CSS 

.greenpromobox {
    background-color: green;
    padding-top: 1px;
    margin-top: 25px;
    max-width: 740px;
    border-radius: 5px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 20px;
}
.subscription-section {
    overflow: hidden;
    margin-top: -30px;
}
.ck_form.ck_naked input[type="text"], .ck_form.ck_naked input[type="email"] {
    font-size: 18px;
    padding: 10px 8px;
    width: 100%;
    border: 1px solid #d6d6d6;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    background-color: #fff;
    margin-bottom: 5px;
    margin: 0px;
    height: 42px;
}
.ck_form.ck_naked .ck_subscribe_button {
    width: 100%;
    color: #fff;
    padding: 9px 0px;
    font-size: 18px;
    background: #0d6db8;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    cursor: pointer;
    border: none;
    text-shadow: none;
    width: 100%;
    height: 42px;
}

答案 1 :(得分：0)

您可以通过移动前一个div .ck_control_group ck_email_field_group 中的按钮 #ck_subscribe_button 来实现您的目的。
然后删除此float:left;  .ck_form.ck_naked input[type="text"], .ck_form.ck_naked input[type="email"]
和这个 .ck_form.ck_naked .ck_subscribe_button

这是最终的HTML 

<form id="ck_subscribe_form" class="ck_subscribe_form" action="https://app.convertkit.com/landing_pages/32973/subscribe" data-remote="true">
<input type="hidden" value="{&quot;form_style&quot;:&quot;naked&quot;,&quot;embed_style&quot;:&quot;inline&quot;,&quot;embed_trigger&quot;:&quot;scroll_percentage&quot;,&quot;scroll_percentage&quot;:&quot;70&quot;,&quot;delay_seconds&quot;:&quot;10&quot;,&quot;display_position&quot;:&quot;br&quot;,&quot;display_devices&quot;:&quot;all&quot;,&quot;days_no_show&quot;:&quot;15&quot;,&quot;converted_behavior&quot;:&quot;show&quot;}" id="ck_form_options">
<input type="hidden" name="id" value="32973" id="landing_page_id">
<div class="ck_errorArea">
    <div id="ck_error_msg" style="display:none">
        <p>There was an error submitting your subscription. Please try again.</p>
    </div>
</div>
<div class="ck_control_group ck_email_field_group">
    <label class="ck_label" for="ck_emailField" style="display: none">Email Address</label>
    <input type="email" name="email" class="ck_email_address" id="ck_emailField" placeholder="Enter your email" required autofocus>
    <button class="subscribe_button ck_subscribe_button btn fields text-uppercase" id='ck_subscribe_button'>
        Start Class Now
    </button>
</div>


最终的CSS 

    /* Layout */
  .ck_form.ck_naked {
  /* divider image */
    background: transparent;
    line-height: 1.5em;
    overflow: hidden;
    color: #666;
    font-size: 16px;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    clear: both;
    margin: 0 0 0 0;
}

.ck_form.ck_naked p {
    padding: 0px;
}

.ck_form, .ck_form * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ck_form.ck_naked .ck_form_fields {
    width: 100%;
    float: left;
    padding: 5%;
        padding-bottom: 1.5%;
}
/* Form fields */

.ck_errorArea {
    display: none; /* temporary */
}

#ck_success_msg {
    padding: 10px 10px 0px;
    border: solid 1px #ddd;
    background: #eee;
}

.ck_form.ck_naked input[type="text"], .ck_form.ck_naked input[type="email"] {
    font-size: 18px;
    padding: 10px 8px;
    width: 34%;
    border: 1px solid #d6d6d6; /* stroke */
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px; /* border radius */
    background-color: #fff; /* layer fill content */
    margin-bottom: 5px;
    height: auto;
    margin: 0px;
    margin-right: 1%;
    height: 42px;
}

.ck_form input[type="text"]:focus, .ck_form input[type="email"]:focus {
    outline: none;
    border-color: #aaa;
}

.ck_form.ck_naked .ck_subscribe_button {
    width: 100%;
    color: #fff;
    margin: 0px;
    padding:  9px 0px;
    font-size: 18px;
    background: #0d6db8;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px; /* border radius */
    cursor: pointer;
    border: none;
    text-shadow: none;
    width: 30%;
    height: 42px;
  }

.ck_form.ck_naked .ck_subscribe_button:hover { 
       background: #3d8ac6;

  }

.ck_converted_content {
  display: none;
    padding: 5%;
    background: #3d8ac6;
}

/* max width 500 */

    .ck_form.ck_naked.width500 .ck_subscribe_button {
        width: 100%;
        float: none;
        margin-top: 5px;
    }

    .ck_form.ck_naked.width500 input[type="text"], .ck_form.ck_naked.width500 input[type="email"] {
        width: 49%;
    }

    .ck_form.ck_naked.width500 input[type="email"] {
        margin-right: 0px;
        width: 50%;
    }

/* max width 400 */

    .ck_form.ck_naked.width400 .ck_subscribe_button, .ck_form.ck_naked.width400 input[type="text"], .ck_form.ck_naked.width400 input[type="email"] {
        width: 100%;
        float: none;
        margin-top: 5px;
    }

.ck_slide_up, .ck_modal, .ck_slide_up .ck_naked, .ck_modal .ck_naked  {
    min-width: 400px;
}

.page .ck_form.ck_naked {
    margin: 50px auto;
    max-width: 700px;
}
相关问题
最新问题