Question

我正在尝试在bootstrap中进行设计，但在执行此操作时，页面末尾会出现一个水平滚动条。我是bootstrap的初学者。我不明白为什么水平滚动条出现或如何删除它。

<form name="form" method="post" id="simplr-reg" class="form-horizontal" style="padding-top:20px" onsubmit="return validate();">
    <div class="form-group">

        <div class="col-xs-6">
            <label>Email <span class="required">*</span></label>    
            <input type="text" class="form-control" name="username" id="username" placeholder="Email" />
            <span id="foremail"></span>
        </div>
        <div class="col-xs-6">
             <label>First Name <span class="required">*</span></label>     
            <input type="text" class="form-control" name="first_name" placeholder="First Name" />
        </div>
    </div>

    <div class="form-group">

        <div class="col-xs-6">
           <label>Last Name <span class="required">*</span></label>
            <input type="text" class="form-control" name="last_name" placeholder="Last Name" />
        </div>
        <div class="col-xs-6">
             <label>Website</label> 
            <input type="text" class="form-control" name="Website" placeholder="Website" />
        </div>
    </div>

     <div class="form-group">

        <div class="col-xs-6">
             <label>Gender <span class="required">*</span></label>   
            <select name="gender" class=" selectclass form-control">
            <option value="">Select Gender</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
            </select>
        </div>
        <div class="col-xs-6">
             <label>Mobile No.</label> 
            <input type="text" class="form-control" name="phone_no" placeholder="Mobile No." />
        </div>
    </div>

     <div class="form-group">

        <div class="col-xs-6">
             <label>City</label> 
            <input type="text" class="form-control" name="city" placeholder="City" />
        </div>
        <div class="col-xs-6">
             <label>State<span class="required">*</span></label> 
            <input type="text" class="form-control" name="state" placeholder="State" />
        </div>
    </div>

    <div class="form-group">

        <div class="col-xs-6">
             <label>Country</label> 
            <input type="text" class="form-control" name="country" placeholder="Country" />
        </div>
        <div class="col-xs-6">
              <label>Linkdin</label> 
            <input type="text" class="form-control" name="linkdin" placeholder="linkdin" />
        </div>
    </div>

    <div class="form-group">

        <div class="col-xs-6">
             <label>Size <span class="required">*</span></label> 
            <select name="size" class="selectclass form-control">
            <option value="">Select Size </option>
            <option value=" 50000+"> 50000+</option>
            <option value=" 20000 - 49999"> 20000 - 49999</option>
            <option value=" 10000 - 19999"> 10000 - 19999</option>
            <option value=" 5000 - 9999"> 5000 - 9999</option>
            <option value=" 2500 - 4999"> 2500 - 4999</option>
            <option value=" 1000 - 2499"> 1000 - 2499</option>
            <option value=" 500 - 999"> 500 - 999</option>
            <option value="250 - 499">250 - 499</option>
            <option value=" 100 - 249"> 100 - 249</option>
            <option value=" 50 - 99"> 50 - 99</option>
            <option value=" 25 - 49"> 25 - 49</option>
            <option value=" 10 - 24"> 10 - 24</option>
            <option value=" 5 - 9"> 5 - 9</option>
            <option value=" 1 - 4"> 1 - 4</option>
            </select>
        </div>
        <div class="col-xs-6">
             <label>Job Title</label> 
            <input type="text" class="form-control" name="job_title" placeholder="Job Title" />
        </div>
    </div>

    <div class="form-group">

        <div class="col-xs-6">
                <label>Industry <span class="required">*</span></label> 
                <select name="industry" class=" selectclass form-control">
                <option value="">Select Industry </option>
                <option value="Agriculture">Agriculture</option>
                <option value=" Construction"> Construction</option>
                <option value=" Consumer Goods"> Consumer Goods</option>
                <option value=" Corporate Services"> Corporate Services</option>
                <option value=" Education"> Education</option>
                <option value=" Finance"> Finance</option>
                <option value=" Government"> Government</option>
                <option value=" High Tech"> High Tech</option>
                <option value=" Legal"> Legal</option>
                <option value=" Life Sciences"> Life Sciences</option>
                <option value=" Manufacturing"> Manufacturing</option>
                <option value=" Media"> Media</option>
                <option value=" Medical/Health Care"> Medical/Health Care</option>
                <option value=" Organizations/Non-Profit"> Organizations/Non-Profit</option>
                <option value=" Recreation/Travel/Entertainment"> Recreation/Travel/Entertainment</option>
                <option value=" Service Industry"> Service Industry</option>
                <option value=" Transportation"> Transportation</option>
                <option value=" Other"> Other</option>
                </select>
        </div>
        <div class="col-xs-6">
                 <label>Job Area <span class="required">*</span></label> 
                <select name="job_area" class=" selectclass form-control">
                <option value="">Select Job Area </option>
                <option value="Agriculture">Agriculture</option>
                <option value=" Banking/Mortgage"> Banking/Mortgage</option>
                <option value=" Biotech"> Biotech</option>
                <option value=" Building Construction"> Building Construction</option>
                <option value=" Business"> Business</option>
                <option value=" Creative/Design"> Creative/Design</option>
                <option value=" Customer Support/Client Services"> Customer Support/Client Services</option>
                <option value=" Education"> Education</option>
                <option value=" Engineering"> Engineering</option>
                <option value=" Executives"> Executives</option>
                <option value=" Finance/Accounting"> Finance/Accounting</option>
                <option value=" Food Services/Hospitality"> Food Services/Hospitality</option>
                <option value=" Human Resources"> Human Resources</option>
                <option value=" Installation/Maintenance/Repair"> Installation/Maintenance/Repair</option>
                <option value=" Insurance"> Insurance</option>
                <option value=" IT/Computers/Electronics"> IT/Computers/Electronics</option>
                <option value=" Journalism/Media/Entertainment"> Journalism/Media/Entertainment</option>
                <option value=" Legal"> Legal</option>
                <option value=" Logistics/Transportation"> Logistics/Transportation</option>
                <option value=" Manufacturing/Production/Operations"> Manufacturing/Production/Operations</option>
                <option value=" Marketing"> Marketing</option>
                <option value=" Medical and Health"> Medical and Health</option>
                <option value=" Quality Assurance/Safety"> Quality Assurance/Safety</option>
                <option value=" Real Estate"> Real Estate</option>
                <option value=" Retail"> Retail</option>
                <option value=" Sales"> Sales</option>
                <option value=" Security Services"> Security Services</option>
                <option value=" Other"> Other</option>
                </select>
        </div>
    </div>
<div class="form-group">

        <div class="col-xs-12 col-xs-offset-3">
            <input type="submit" id="submit" class="btn btn-primary " name="submit-reg" value="Register"/>
        </div>
    </div>
</form>
    </div>
    </div>
    </div>






</div>

Answer 1

我发现了以下问题

你的cols应该被包装在一个容器中（我已经改变了下面所以你的表单有容器类）
我还为每组cols添加了一个行类（我认为这是可选的，但我见过的大多数示例都将cols分组为行）
每行最多只能添加12个cols，因此最后一行12个cols的偏移量为另一个3会造成大空间问题，将其更改为9 col宽度，偏移量为3，它应该可以解决您的问题

<form name="form" method="post" id="simplr-reg" class="form-horizontal container" style="padding-top:20px" onsubmit="return validate();">
  <div class="form-group row">

    <div class="col-xs-6">
      <label>Email <span class="required">*</span>
      </label>
      <input type="text" class="form-control" name="username" id="username" placeholder="Email">
      <span id="foremail"></span>
    </div>
    <div class="col-xs-6">
      <label>First Name <span class="required">*</span>
      </label>
      <input type="text" class="form-control" name="first_name" placeholder="First Name">
    </div>
  </div>

  <div class="form-group row">

    <div class="col-xs-6">
      <label>Last Name <span class="required">*</span>
      </label>
      <input type="text" class="form-control" name="last_name" placeholder="Last Name">
    </div>
    <div class="col-xs-6">
      <label>Website</label>
      <input type="text" class="form-control" name="Website" placeholder="Website">
    </div>
  </div>

  <div class="form-group row">

    <div class="col-xs-6">
      <label>Gender <span class="required">*</span>
      </label>
      <select name="gender" class=" selectclass form-control">
        <option value="">Select Gender</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select>
    </div>
    <div class="col-xs-6">
      <label>Mobile No.</label>
      <input type="text" class="form-control" name="phone_no" placeholder="Mobile No.">
    </div>
  </div>

  <div class="form-group row">

    <div class="col-xs-6">
      <label>City</label>
      <input type="text" class="form-control" name="city" placeholder="City">
    </div>
    <div class="col-xs-6">
      <label>State<span class="required">*</span>
      </label>
      <input type="text" class="form-control" name="state" placeholder="State">
    </div>
  </div>

  <div class="form-group row">

    <div class="col-xs-6">
      <label>Country</label>
      <input type="text" class="form-control" name="country" placeholder="Country">
    </div>
    <div class="col-xs-6">
      <label>Linkdin</label>
      <input type="text" class="form-control" name="linkdin" placeholder="linkdin">
    </div>
  </div>

  <div class="form-group row">

    <div class="col-xs-6">
      <label>Size <span class="required">*</span>
      </label>
      <select name="size" class="selectclass form-control">
        <option value="">Select Size</option>
        <option value=" 50000+">50000+</option>
        <option value=" 20000 - 49999">20000 - 49999</option>
        <option value=" 10000 - 19999">10000 - 19999</option>
        <option value=" 5000 - 9999">5000 - 9999</option>
        <option value=" 2500 - 4999">2500 - 4999</option>
        <option value=" 1000 - 2499">1000 - 2499</option>
        <option value=" 500 - 999">500 - 999</option>
        <option value="250 - 499">250 - 499</option>
        <option value=" 100 - 249">100 - 249</option>
        <option value=" 50 - 99">50 - 99</option>
        <option value=" 25 - 49">25 - 49</option>
        <option value=" 10 - 24">10 - 24</option>
        <option value=" 5 - 9">5 - 9</option>
        <option value=" 1 - 4">1 - 4</option>
      </select>
    </div>
    <div class="col-xs-6">
      <label>Job Title</label>
      <input type="text" class="form-control" name="job_title" placeholder="Job Title">
    </div>
  </div>

  <div class="form-group row">

    <div class="col-xs-6">
      <label>Industry <span class="required">*</span>
      </label>
      <select name="industry" class=" selectclass form-control">
        <option value="">Select Industry</option>
        <option value="Agriculture">Agriculture</option>
        <option value=" Construction">Construction</option>
        <option value=" Consumer Goods">Consumer Goods</option>
        <option value=" Corporate Services">Corporate Services</option>
        <option value=" Education">Education</option>
        <option value=" Finance">Finance</option>
        <option value=" Government">Government</option>
        <option value=" High Tech">High Tech</option>
        <option value=" Legal">Legal</option>
        <option value=" Life Sciences">Life Sciences</option>
        <option value=" Manufacturing">Manufacturing</option>
        <option value=" Media">Media</option>
        <option value=" Medical/Health Care">Medical/Health Care</option>
        <option value=" Organizations/Non-Profit">Organizations/Non-Profit</option>
        <option value=" Recreation/Travel/Entertainment">Recreation/Travel/Entertainment</option>
        <option value=" Service Industry">Service Industry</option>
        <option value=" Transportation">Transportation</option>
        <option value=" Other">Other</option>
      </select>
    </div>
    <div class="col-xs-6">
      <label>Job Area <span class="required">*</span>
      </label>
      <select name="job_area" class=" selectclass form-control">
        <option value="">Select Job Area</option>
        <option value="Agriculture">Agriculture</option>
        <option value=" Banking/Mortgage">Banking/Mortgage</option>
        <option value=" Biotech">Biotech</option>
        <option value=" Building Construction">Building Construction</option>
        <option value=" Business">Business</option>
        <option value=" Creative/Design">Creative/Design</option>
        <option value=" Customer Support/Client Services">Customer Support/Client Services</option>
        <option value=" Education">Education</option>
        <option value=" Engineering">Engineering</option>
        <option value=" Executives">Executives</option>
        <option value=" Finance/Accounting">Finance/Accounting</option>
        <option value=" Food Services/Hospitality">Food Services/Hospitality</option>
        <option value=" Human Resources">Human Resources</option>
        <option value=" Installation/Maintenance/Repair">Installation/Maintenance/Repair</option>
        <option value=" Insurance">Insurance</option>
        <option value=" IT/Computers/Electronics">IT/Computers/Electronics</option>
        <option value=" Journalism/Media/Entertainment">Journalism/Media/Entertainment</option>
        <option value=" Legal">Legal</option>
        <option value=" Logistics/Transportation">Logistics/Transportation</option>
        <option value=" Manufacturing/Production/Operations">Manufacturing/Production/Operations</option>
        <option value=" Marketing">Marketing</option>
        <option value=" Medical and Health">Medical and Health</option>
        <option value=" Quality Assurance/Safety">Quality Assurance/Safety</option>
        <option value=" Real Estate">Real Estate</option>
        <option value=" Retail">Retail</option>
        <option value=" Sales">Sales</option>
        <option value=" Security Services">Security Services</option>
        <option value=" Other">Other</option>
      </select>
    </div>
  </div>
  <div class="form-group row">

    <div class="col-xs-9 col-xs-offset-3">
      <input type="submit" id="submit" class="btn btn-primary " name="submit-reg" value="Register">
    </div>
  </div>
</form>

Here is a bootply showing the changes I have made

我还将容器的宽度覆盖为100％，使其更像原始代码（删除bootply右侧的样式，以便在bootstrap响应宽度上看到它）

水平滚动条出现在bootstrap中

1 个答案: