Question

我一直在搞乱引导程序只是几个星期，现在试图习惯于网格和东西，所以我不确定这里发生了什么，或者它是否甚至与我弄乱了HTML中的一些代码。我甚至为该页面注释了我的自定义css样式表，由于某种原因，我无法以浏览器大小单击表单中的任何文本字段。它似乎发生在768px-1199px的浏览器大小。当我的div标签上有类col-lg-6 col-sm-12时，我遇到了这个问题。

当我将这些类放在输入标记上时，字段达到100％并且我可以单击文本字段，但是我不能让它看起来像它应该是三个文本的设计左边的字段和右边的3个字段。

这是我的HTML和自定义CSS。 CodePen

<form id="ad-form">
<div class="container">
    <h1 class="text-center">Wickliffe Italian-American Club</h1>
    <h4 class="text-center">2016 Pat O'brien Chevrolet Cleveland Challenge Cup of Bocce Advertisement Form</h4>
    <p class="bg-danger text-center">Paragraph</p>

 <!-- BEGIN TEXT INPUT FORM -->
  <div class="form-group col-lg-6 col-sm-12">
    <label for="company"><h5>Company</h5></label>
    <input type="text" class="form-control" id="company" placeholder="Company Name" />
  </div>
  <div class="form-group col-lg-6 col-sm-12">
    <label for="fl-name"><h5>Contact Name</h5></label>
    <input type="text" required class="form-control" id="fl-name" placeholder="First and Last Name" />
  </div>
  <div class="form-group col-lg-6 col-sm-12">
    <label for="address"><h5>Address</h5></label>
    <input type="text" required class="form-control" id="address" placeholder="Address, City, State, Zip" />
  </div>
  <div class="form-group col-lg-6 col-sm-12">
    <label for="phone"><h5>Phone Number</h5></label> 
    <input type="text" required class="form-control" id="phone" placeholder="Contact Phone Number" />
  </div>  
  <div class="form-group col-lg-6 col-sm-12">
    <label for="email"><h5>Email</h5></label>
    <input type="email" required class="form-control" id="email" placeholder="Email Address" />
  </div>    
  <div class="form-group col-lg-6 col-sm-12">
    <label for="reference"><h5>Referred by Italian-American Club Member</h5></label>
    <input type="text" required class="form-control" id="reference" placeholder="Reference Name" />
  </div>
  <!-- END TEXT INPUT FORM -->

  <!-- BEGIN RADIO FORM -->  
   <div class="form-group col-lg-12">
     <h5>Please select appropriate ad size below:</h5>
     <div class="radio">
     <label>
         <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
         Full Page (4.5in x 7.5in) - <strong>$125.00</strong>
     </label>
     </div>
     <div class="radio">
       <label>
         <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
         1/2 Page (4.5in x 3.75in) - <strong>$75</strong>
       </label>
     </div>
     <div class="radio">
       <label>
         <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
         1/4 Page (4.5in x 1.875in) - <strong>$35.00</strong>
       </label>
     </div>
     <div class="radio">
       <label>
         <input type="radio" name="optionsRadios" id="optionsRadios4" value="option4">
         Patron Ad - <strong>$15.00</strong>
       </label>
       <div>
           <input type="submit" />
       </div>
     </div> 
   </div><!-- END RADIO FORM -->
</div><!-------- END CONTAINER -------->

CSS

#ad-form {
margin-top: 100px;   
}

#ad-form p {
margin: 30px 0px;
}

#ad-form h5 {
font-weight:  bolder;
color: #158000;
}

.bg-danger {
color: #730000;
border: 1px solid #d4b7b7;
border-radius: 4px;
padding: 15px;
font-style: italic;
}

.form-group {
margin-bottom: 30px;
}

.form-control:focus   {
border-color: #9ac19d;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(175, 211, 178, .6);
}

.form-control {
border-radius: 3px;
border: 1px solid #9ac19d;
}

Answer 1

这是由浮动引起的问题，您可以通过以下几种方式解决这个问题：您可以将行包装成行，用自己的CSS清除float或将表单组和放大器分开;列类到单个div s。

*注意：请记住，您直接更改某些类规则，因此您需要使用新类或特殊性来全局更改这些规则，否则您{{1再次使用这些相同的类时，在应用程序的其他方面存在问题。

工作示例：

添加may s

的示例

＆＃13;

row

＆＃13;

@media (min-width: 768px) and (max-width: 1199px) {
  #ad-form {
    background: lightblue;
  }
}
#ad-form {
  margin-top: 100px;
}
#ad-form p {
  margin: 30px 0px;
}
#ad-form h5 {
  font-weight: bolder;
  color: #158000;
}
#ad-form .bg-danger {
  color: #730000;
  border: 1px solid #d4b7b7;
  border-radius: 4px;
  padding: 15px;
  font-style: italic;
}
#ad-form .form-group {
  margin-bottom: 30px;
}
#ad-form .form-control:focus {
  border-color: #9ac19d;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(175, 211, 178, .6);
}
#ad-form .form-control {
  border-radius: 3px;
  border: 1px solid #9ac19d;
}

＆＃13;

示例清除浮动：

示例CSS

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form id="ad-form">
  <div class="container">

    <div class="row">
      <div class="col-sm-12">
        <h1 class="text-center">Wickliffe Italian-American Club</h1>
        <h4 class="text-center">Tournament Name</h4>
        <p class="bg-danger text-center">Paragraph</p>
      </div>
    </div>

    <div class="row">
      <div class="form-group col-lg-6 col-sm-12">
        <label for="company">
          <h5>Company</h5>
        </label>
        <input type="text" class="form-control" id="company" placeholder="Company Name" />
      </div>
      <div class="form-group col-lg-6 col-sm-12">
        <label for="fl-name">
          <h5>Contact Name</h5>
        </label>
        <input type="text" required class="form-control" id="fl-name" placeholder="First and Last Name" />
      </div>
    </div>
    <div class="row">
      <div class="form-group col-lg-6 col-sm-12">
        <label for="address">
          <h5>Address</h5>
        </label>
        <input type="text" required class="form-control" id="address" placeholder="Address, City, State, Zip" />
      </div>
      <div class="form-group col-lg-6 col-sm-12">
        <label for="phone">
          <h5>Phone Number</h5>
        </label>
        <input type="text" required class="form-control" id="phone" placeholder="Contact Phone Number" />
      </div>
    </div>
    <div class="row">
      <div class="form-group col-lg-6 col-sm-12">
        <label for="email">
          <h5>Email</h5>
        </label>
        <input type="email" required class="form-control" id="email" placeholder="Email Address" />
      </div>
      <div class="form-group col-lg-6 col-sm-12">
        <label for="reference">
          <h5>Referred by Italian-American Club Member</h5>
        </label>
        <input type="text" required class="form-control" id="reference" placeholder="Reference Name" />
      </div>
    </div>

    <div class="row">
      <div class="form-group col-lg-12">
        <h5>Please select appropriate ad size below:</h5>
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"><strong>$125.00</strong>
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"><strong>$75</strong>
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3"><strong>$35.00</strong>
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios4" value="option4"> <strong>$15.00</strong>
          </label>
          <div>
            <input type="submit" />
          </div>
        </div>
      </div>
    </div>

  </div>
</form>

＆＃13;

@media (min-width:768px) and (max-width:1199px) {
  #ad-form .form-group {
    clear: left;
  }
}

＆＃13;

@media (min-width: 768px) and (max-width: 1199px) {
  #ad-form {
    background: lightblue;
  }
  #ad-form .form-group {
    clear: left;
  }
}
#ad-form {
  margin-top: 100px;
}
#ad-form p {
  margin: 30px 0px;
}
#ad-form h5 {
  font-weight: bolder;
  color: #158000;
}
#ad-form .bg-danger {
  color: #730000;
  border: 1px solid #d4b7b7;
  border-radius: 4px;
  padding: 15px;
  font-style: italic;
}
#ad-form .form-group {
  margin-bottom: 30px;
}
#ad-form .form-control:focus {
  border-color: #9ac19d;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(175, 211, 178, .6);
}
#ad-form .form-control {
  border-radius: 3px;
  border: 1px solid #9ac19d;
}

＆＃13;

列和表单组分隔的示例：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form id="ad-form">
  <div class="container">

    <div class="form-group col-sm-12">
      <h1 class="text-center">Wickliffe Italian-American Club</h1>
      <h4 class="text-center">Tournament Name</h4>
      <p class="bg-danger text-center">Paragraph</p>
    </div>

    <div class="form-group col-lg-6">
      <label for="company">
        <h5>Company</h5>
      </label>
      <input type="text" class="form-control" id="company" placeholder="Company Name" />
    </div>

    <div class="form-group col-lg-6">
      <label for="fl-name">
        <h5>Contact Name</h5>
      </label>
      <input type="text" required class="form-control" id="fl-name" placeholder="First and Last Name" />
    </div>

    <div class="form-group col-lg-6">
      <label for="address">
        <h5>Address</h5>
      </label>
      <input type="text" required class="form-control" id="address" placeholder="Address, City, State, Zip" />
    </div>

    <div class="form-group col-lg-6">
      <label for="phone">
        <h5>Phone Number</h5>
      </label>
      <input type="text" required class="form-control" id="phone" placeholder="Contact Phone Number" />
    </div>

    <div class="form-group col-lg-6">
      <label for="email">
        <h5>Email</h5>
      </label>
      <input type="email" required class="form-control" id="email" placeholder="Email Address" />
    </div>

    <div class="form-group col-lg-6">
      <label for="reference">
        <h5>Referred by Italian-American Club Member</h5>
      </label>
      <input type="text" required class="form-control" id="reference" placeholder="Reference Name" />
    </div>

    <div class="form-group col-lg-6">
      <h5>Please select appropriate ad size below:</h5>
      <div class="radio">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"><strong>$125.00</strong>
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"><strong>$75</strong>
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3"><strong>$35.00</strong>
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios4" value="option4"> <strong>$15.00</strong>
        </label>
        <div>
          <input type="submit" />
        </div>
      </div>
    </div>

  </div>
</form>

＆＃13;

@media (min-width: 768px) and (max-width: 1199px) {
  #ad-form {
    background: lightblue;
  }
}
#ad-form {
  margin-top: 100px;
}
#ad-form p {
  margin: 30px 0px;
}
#ad-form h5 {
  font-weight: bolder;
  color: #158000;
}
#ad-form .bg-danger {
  color: #730000;
  border: 1px solid #d4b7b7;
  border-radius: 4px;
  padding: 15px;
  font-style: italic;
}
#ad-form .form-group {
  margin-bottom: 30px;
}
#ad-form .form-control:focus {
  border-color: #9ac19d;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(175, 211, 178, .6);
}
#ad-form .form-control {
  border-radius: 3px;
  border: 1px solid #9ac19d;
}

＆＃13;

输入文本字段在特定浏览器大小时无法点击

1 个答案: