Question

我使用了Contact-form 7插件来创建表单。我们有一个申请表，我们希望并排显示表单元素，这意味着两个字段应该在一行中。为此，我制作了以下代码，

    <div class="container">
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
     <p>*Name[text* leadsquared-FirstName placeholder ""]</p>
     </div>
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
     <p>*Qualification[text* leadsquared-mx_Qualification placeholder ""]</p>
     </div>

     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
     <p>*Name of the Business[text* leadsquared-mx_Name_of_the_Business placeholder ""]</p>
     </div>
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
     <p>*Organization Name[text* leadsquared-mx_Organization_Name placeholder ""]</p>
     </div>

     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
     <p>*Business Industry[text* leadsquared-mx_Business_Industry placeholder ""]</p>
     </div>
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
     <p>*Working As[text* leadsquared-mx_Working_As placeholder ""]</p>
     </div>

     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
     <p>*Phone No[text* leadsquared-Phone placeholder ""]</p>
     </div>
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
     <p>*Email ID[email* leadsquared-EmailAddress placeholder ""]</p>
     </div>

     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
     <p>*Address[textarea* leadsquared-mx_Address 10x6 placeholder ""]</p>
     </div>
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
     <p>*Applying for:
     [checkbox* leadsquared-mx_Applying_for "Master Franchisee" "Unit Franchise"]</p>
     <p>*Preferred Location[select PreferredLocation "Indore" "Aurangabad" "Nagpur" "Any other"]</p>
     </div>

    <p>Listed below are some of the benefits of being a franchisee. Please rank the items that could be most helpful in achieving individual and organizational objectives:</p>

    <table class="table table-bordered">
     <tbody>
      <tr>
       <td width="180">[number* leadsquared-mx_Grow_Profits_Quickly min:1 max:5 placeholder "Number Between 1 to 5"]</td>
       <td width="145">: Grow Profits Quickly</td>
      </tr>
      <tr>
       <td>[number* leadsquared-mx_Help_Stakeholders_achieve_their_goals min:1 max:5 placeholder "Number Between 1 to 5"]</td>
       <td>: Help Stakeholders achieve their goals</td>
      </tr>
      <tr>
       <td>[number* leadsquared-mx_Focus_on_Business_Expansion min:1 max:5 placeholder "Number Between 1 to 5"]</td>
       <td>: Focus on Business Expansion</td>
      </tr>
      <tr>
       <td>[number* into_a_Master_Franchisee min:1 max:5 placeholder "Number Between 1 to 5"]</td>
       <td>: Turn into a Master Franchisee if you are a Unit Franchisee Or Grow More Unit Franchisees, if you already a Master Franchisee.</td>
      </tr>
      <tr>
       <td>[number* leadsquared-mx_Individual_Growth min:1 max:5 placeholder "Number Between 1 to 5"]</td>
       <td>: Individual Growth</td>
      </tr>
    </tbody>
    </table>

    <p>Please check the box below that most closely coincides with immediate objectives:</p>
    [checkbox* leadsquared-mx_Please_check_the_box_below_that_closely_Objective "Earn Profits" "Change Current Education System" "Make a Sound Investment" "Make a Synergic Partnership" "Other"]

    <p>When do you wish to start Times and Trends Academy (TTA) franchisee? Three reasons why you should be given an opportunity to start our franchise?</p>
    [textarea* leadsquared-mx_Why_given_an_opportunity_to_start_our_franchise]<br>

        <p style="text-align: -webkit-center;text-align: -moz-center;text-align: center;">[captchac captcha-170] [captchar captcha-170 4/4 placeholder "*Enter a Captcha"]</p>

        <p style="text-align: -webkit-center;text-align: -moz-center;text-align: center;">[submit "Submit"]</p>


</div>

<style>
div.wpcf7{
background-color:#E5D6D3;
padding:20px 0px;
}
div.wpcf7-validation-errors {
    color: #f7e700;
}
.wpcf7-response-output.wpcf7-display-none.wpcf7-mail-sent-ok {
    color: #398f14;
}
input.wpcf7-form-control.wpcf7-captchar {
    width: 75%;
    float: right;
}

@media screen and (max-width: 500px) {
input.wpcf7-form-control.wpcf7-captchar {
    width: 60%;
    float: right;
}
}
span.wpcf7-not-valid-tip {
    margin-top: 10px;
}
</style>

此代码的问题是，当我们调整屏幕大小时，那些表单文本字段将采用屏幕的完整分区，这就是为什么文本框的某些部分将隐藏在我们的侧边栏部分的背面。

为什么会这样，请告诉我们。

链接供您参考：https://timesandtrendsacademy.com/franchisee-application-form/

谢谢，戈帕尔

Answer 1

您正在使用bootstrap中的container类，您需要在容器类之后添加row类。试试这个。

联系表格七插件的网格系统的一些问题

1 个答案: