1. 首页
  2. 问答
  3. 按钮在1199和768px之间停止工作

按钮在1199和768px之间停止工作

2017-02-28 61 views
0

我遇到了一些奇怪的行为。当我的屏幕在1199和768之间的任何位置调整大小时，我无法选择前四个按钮。但是任何大小都不在这个范围内，那么当你点击一个按钮时，它会显示正确的div和全部。我必须做些什么才能激活这些尺寸的按钮？按钮在1199和768px之间停止工作

https://jsfiddle.net/vo1npqdx/308/

<!-- ****PROPERTY ID #1**** --> 

    <div class="col-lg-12"> 
     <label>1. SEARCH PROPERTIES BY CLICKING <u>ONE</u> OF THE FOLLOWING BUTTONS:</label> 
    </div> 

    <div id="searchoptions"> 
     <div class="col-sm-3"> 
      <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="accountNumber" name="accountNumber" value="accountNumber">PROPERTY ID</button> 
     </div> 
     <div class="col-sm-3"> 
      <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="name" name="name" value="name">OWNER NAME</button> 
     </div> 
     <div class="col-sm-3"> 
      <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="location" name="location" value="location">PROPERTY ADDRESS</button> 
     </div> 
     <div class="col-sm-3"> 
      <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="billingAddress" name="billingAddress" value="billingAddress">BILLING ADDRESS</button> 
     </div> 
    </div> 

<!-- ****SEARCH OPTIONS #2**** --> 

<!-- ****Property ID**** --> 
<div id="propertyidchoice"> 
    <div class="col-lg-12"> 
     <label>2. ENTER THE PROPERTY ID NUMBER AND SELECT TAX YEAR AND PAID STATUS:<span style="color:red;">&nbsp;* is a required field</span></label> 
    </div> 

    <div id="propertyidsearch"> 
     <div class="col-sm-3"> 
      <div class="required-field"> 
       <input type="text" name="searchValue" maxlength="2000" size="40" value="" class="form-control input-sm margin-bottom-10" placeholder="--- Enter Property Id Here ---"> 
      </div> 
     </div> 
     <div class="col-sm-2"> 
      <select name="taxYear" class="form-control input-sm margin-bottom-10"> 
       <option value="ALL">All Yrs.</option> 
       <option value="2016">2016</option> 
       <option value="2015">2015</option> 
       <option value="2014">2014</option> 
       <option value="2013">2013</option> 
       <option value="2012">2012</option> 
       <option value="2011">2011</option> 
       <option value="2010">2010</option> 
       <option value="2009">2009</option> 
       <option value="2008">2008</option> 
       <option value="2007">2007</option> 
       <option value="2006">2006</option> 
       <option value="2005">2005</option> 
       <option value="2004">2004</option> 
       <option value="2003">2003</option> 
       <option value="2002">2002</option> 
       <option value="2001">2001</option> 
       <option value="2000">2000</option> 
       <option value="1999">1999</option> 
       <option value="1998">1998</option> 
       <option value="1997">1997</option> 
       <option value="1996">1996</option> 
       <option value="1995">1995</option> 
       <option value="1994">1994</option> 
       <option value="1993">1993</option> 
       <option value="1992">1992</option> 
       <option value="1991">1991</option> 
       <option value="1990">1990</option> 
      </select> 
     </div> 
     <div class="col-sm-2"> 
      <select name="paidStatus" class="form-control input-sm margin-bottom-10"><option value="" selected="selected">All</option> 
       <option value="Y">Paid</option> 
       <option value="N">Unpaid</option> 
      </select> 
     </div> 
     <div class="col-sm-3"> 
      <button type="submit" class="btn-u btn-default input-sm margin-bottom-10" id="group" name="group">SEARCH</button> 
     </div> 
    </div> 
</div> 

<!-- ****Owner Name**** --> 

<div id="ownernamechoice" style="display:none;"> 
    <div class="col-lg-12"> 
     <label>2. ENTER THE OWNER'S NAME AND SELECT TAX YEAR AND PAID STATUS:<span style="color:red;">&nbsp;* is a required field</span></label> 
    </div> 

    <div id="propertyidsearch"> 
     <div class="col-sm-3"> 
      <div class="required-field"> 
       <input type="text" name="searchValue" maxlength="2000" size="40" value="" class="form-control input-sm margin-bottom-10" placeholder="--- LastName, FirstName ---">   
      </div> 
     </div> 
     <div class="col-sm-2"> 
      <select name="taxYear" class="form-control input-sm margin-bottom-10"> 
       <option value="ALL">All Yrs.</option> 
       <option value="2016">2016</option> 
       <option value="2015">2015</option> 
       <option value="2014">2014</option> 
       <option value="2013">2013</option> 
       <option value="2012">2012</option> 
       <option value="2011">2011</option> 
       <option value="2010">2010</option> 
       <option value="2009">2009</option> 
       <option value="2008">2008</option> 
       <option value="2007">2007</option> 
       <option value="2006">2006</option> 
       <option value="2005">2005</option> 
       <option value="2004">2004</option> 
       <option value="2003">2003</option> 
       <option value="2002">2002</option> 
       <option value="2001">2001</option> 
       <option value="2000">2000</option> 
       <option value="1999">1999</option> 
       <option value="1998">1998</option> 
       <option value="1997">1997</option> 
       <option value="1996">1996</option> 
       <option value="1995">1995</option> 
       <option value="1994">1994</option> 
       <option value="1993">1993</option> 
       <option value="1992">1992</option> 
       <option value="1991">1991</option> 
       <option value="1990">1990</option> 
      </select> 
     </div> 
     <div class="col-sm-2"> 
      <select name="paidStatus" class="form-control input-sm margin-bottom-10"><option value="" selected="selected">All</option> 
       <option value="Y">Paid</option> 
       <option value="N">Unpaid</option> 
      </select> 
     </div> 
     <div class="col-sm-3"> 
      <button type="submit" class="btn-u btn-default input-sm margin-bottom-10" id="group" name="group">SEARCH</button> 
     </div> 
    </div> 
</div> 

<!-- **** Property Address **** --> 

<div id="propertyaddresschoice" style="display:none;"> 
    <div class="col-lg-12"> 
     <label>2. ENTER THE PROPERTY ADDRESS AND SELECT TAX YEAR AND PAID STATUS:<span style="color:red;">&nbsp;* is a required field</span></label> 
    </div> 

    <div id="propertyidsearch"> 
     <div class="col-lg-1"> 
      <label>House #</label> 
      <input type="text" class="form-control input-sm margin-bottom-10">   
     </div> 
     <div class="col-lg-1"> 
      <label>Unit</label> 
      <input type="text" class="form-control input-sm margin-bottom-10">   
     </div> 
     <div class="col-lg-3"> 
      <label>Street<span style="color:red;">&nbsp;*</span></label> 
      <input type="text" class="form-control input-sm margin-bottom-10">   
     </div> 
     <div class="col-lg-1"> 
      <label>Direction</label> 
      <select name="propertySearchCritera.location.streetDirection" class="form-control input-sm margin-bottom-10"> 
       <option value="" selected="selected">&nbsp;</option>   
       <option value="E">E</option> 
       <option value="N">N</option> 
       <option value="NE">NE</option> 
       <option value="NW">NW</option> 
       <option value="S">S</option> 
       <option value="SE">SE</option> 
       <option value="SW">SW</option> 
       <option value="W">W</option> 
      </select> 
     </div> 
     <div class="col-lg-1"> 
      <label>Suffix 1</label> 
      <select name="propertySearchCritera.location.streetType1" class="form-control input-sm margin-bottom-10"> 
       <option value="" selected="selected">&nbsp;</option> 
       <option value="AVE">AVE</option> 
       <option value="BLVD">BLVD</option> 
       <option value="CIR">CIR</option> 
       <option value="CT">CT</option> 
       <option value="CV">CV</option> 
       <option value="DR">DR</option> 
       <option value="GLN">GLN</option> 
       <option value="HWY">HWY</option> 
       <option value="LN">LN</option> 
       <option value="LOOP">LOOP</option> 
       <option value="PIKE">PIKE</option> 
       <option value="PKY">PKY</option> 
       <option value="PL">PL</option> 
       <option value="PLZ">PLZ</option> 
       <option value="RD">RD</option> 
       <option value="RUN">RUN</option> 
       <option value="ST">ST</option> 
       <option value="TER">TER</option> 
       <option value="TRCE">TRCE</option> 
       <option value="TRL">TRL</option> 
       <option value="WALK">WALK</option> 
       <option value="WAY">WAY</option> 
       <option value="XING">XING</option> 
      </select>   
     </div> 
     <div class="col-lg-1"> 
      <label>Suffix 2</label> 
      <select name="propertySearchCritera.location.streetType2" class="form-control input-sm margin-bottom-10"> 
       <option value="" selected="selected">&nbsp;</option> 
       <option value="AVE">AVE</option> 
       <option value="BLVD">BLVD</option> 
       <option value="CIR">CIR</option> 
       <option value="CT">CT</option> 
       <option value="CV">CV</option> 
       <option value="DR">DR</option> 
       <option value="GLN">GLN</option> 
       <option value="HWY">HWY</option> 
       <option value="LN">LN</option> 
       <option value="LOOP">LOOP</option> 
       <option value="PIKE">PIKE</option> 
       <option value="PKY">PKY</option> 
       <option value="PL">PL</option> 
       <option value="PLZ">PLZ</option> 
       <option value="RD">RD</option> 
       <option value="RUN">RUN</option> 
       <option value="ST">ST</option> 
       <option value="TER">TER</option> 
       <option value="TRCE">TRCE</option> 
       <option value="TRL">TRL</option> 
       <option value="WALK">WALK</option> 
       <option value="WAY">WAY</option> 
       <option value="XING">XING</option> 
      </select>   
     </div> 
     <div class="col-lg-2"> 
      <label>Tax Year</label> 
      <select name="taxYear" class="form-control input-sm margin-bottom-10"> 
       <option value="ALL">All Yrs.</option> 
       <option value="2016">2016</option> 
       <option value="2015">2015</option> 
       <option value="2014">2014</option> 
       <option value="2013">2013</option> 
       <option value="2012">2012</option> 
       <option value="2011">2011</option> 
       <option value="2010">2010</option> 
       <option value="2009">2009</option> 
       <option value="2008">2008</option> 
       <option value="2007">2007</option> 
       <option value="2006">2006</option> 
       <option value="2005">2005</option> 
       <option value="2004">2004</option> 
       <option value="2003">2003</option> 
       <option value="2002">2002</option> 
       <option value="2001">2001</option> 
       <option value="2000">2000</option> 
       <option value="1999">1999</option> 
       <option value="1998">1998</option> 
       <option value="1997">1997</option> 
       <option value="1996">1996</option> 
       <option value="1995">1995</option> 
       <option value="1994">1994</option> 
       <option value="1993">1993</option> 
       <option value="1992">1992</option> 
       <option value="1991">1991</option> 
       <option value="1990">1990</option> 
      </select> 
     </div> 
     <div class="col-lg-1"> 
      <label>Status</label> 
      <select name="paidStatus" class="form-control input-sm margin-bottom-10"><option value="" selected="selected">All</option> 
       <option value="Y">Paid</option> 
       <option value="N">Unpaid</option> 
      </select> 
     </div> 
     <div class="col-lg-1"> 
      <label>&nbsp;</label> 
      <button type="submit" class="btn-u btn-default btn-fix input-sm margin-bottom-10" id="group" name="group">SEARCH</button> 
     </div> 
    </div> 
</div> 

<!-- **** Billing Address **** --> 

<div id="billingaddresschoice" style="display:none;"> 
    <div class="col-lg-12"> 
     <label>2. ENTER THE BILLING ADDRESS AND SELECT TAX YEAR AND PAID STATUS:<span style="color:red;">&nbsp;* is a required field</span></label> 
    </div> 

    <div id="propertyidsearch"> 
     <div class="col-sm-3"> 
      <div class="required-field"> 
       <input type="text" name="searchValue" maxlength="2000" size="40" value="" class="form-control input-sm margin-bottom-10" placeholder="--- Enter Billing Address Here ---">   
      </div> 
     </div> 
     <div class="col-sm-2"> 
      <select name="taxYear" class="form-control input-sm margin-bottom-10"> 
       <option value="ALL">All Yrs.</option> 
       <option value="2016">2016</option> 
       <option value="2015">2015</option> 
       <option value="2014">2014</option> 
       <option value="2013">2013</option> 
       <option value="2012">2012</option> 
       <option value="2011">2011</option> 
       <option value="2010">2010</option> 
       <option value="2009">2009</option> 
       <option value="2008">2008</option> 
       <option value="2007">2007</option> 
       <option value="2006">2006</option> 
       <option value="2005">2005</option> 
       <option value="2004">2004</option> 
       <option value="2003">2003</option> 
       <option value="2002">2002</option> 
       <option value="2001">2001</option> 
       <option value="2000">2000</option> 
       <option value="1999">1999</option> 
       <option value="1998">1998</option> 
       <option value="1997">1997</option> 
       <option value="1996">1996</option> 
       <option value="1995">1995</option> 
       <option value="1994">1994</option> 
       <option value="1993">1993</option> 
       <option value="1992">1992</option> 
       <option value="1991">1991</option> 
       <option value="1990">1990</option> 
      </select> 
     </div> 
     <div class="col-sm-2"> 
      <select name="paidStatus" class="form-control input-sm margin-bottom-10"><option value="" selected="selected">All</option> 
       <option value="Y">Paid</option> 
       <option value="N">Unpaid</option> 
      </select> 
     </div> 
     <div class="col-sm-3"> 
      <button type="submit" class="btn-u btn-default input-sm margin-bottom-10" id="group" name="group">SEARCH</button> 
     </div> 
    </div> 
</div>

任何帮助，将不胜感激！

来源

2017-02-28 David Brierton

+0

您需要展示一个显示问题的标记的最小示例，而不是明天可以改变或消失的第三方网站，以帮助未来任何人。你只显示HTML和没有CSS。 – Rob

回答

6

你的searchoptions div有4个浮动元素，没有清晰，所以它的高度是0px。它下面的div正在被上移它，因此它覆盖它，不允许你点击任何东西。

包括在你searchoptions DIV一个明确的元素：

<div id="searchoptions"> 
    <div class="col-sm-3"> 
     ... 
    </div> 
    <div class="col-sm-3"> 
     ... 
    </div> 
    <div class="col-sm-3"> 
     ... 
    </div> 
    <div class="col-sm-3"> 
     ... 
    </div> 
    <div style="clear: both;"></div> 
</div>

或者，你可以使用伪元素来清除它，而不需要额外的<div>：

#searchoptions::after { 
    content: ""; 
    display: table; 
    clear: both; 
}

来源

2017-02-28 21:03:37 Santi

2

权，任何时候这发生在我身上，我做的第一件事就是将鼠标放在一个无响应的按钮上，并尝试使用浏览器DOM检查器对其进行检查。 （右键单击，选择“检查元素”）通常情况下，问题是页面上的另一个元素已经移动到您的按钮的“顶部”...

果然，它似乎是它下面的行，漂浮在它的上面。

所有你需要做的就是确保有按钮的排事实上是一个自举行：

<div id="searchoptions" class="row">

这会清除列浮动，并且还给该行的高度。

希望这会有所帮助！

来源

2017-02-28 21:07:19 MacPrawn

相关问题

 相关问题