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

Question

我遇到了一些奇怪的行为。当我的屏幕在1199和768之间的任何地方调整大小时，无法选择前四个按钮。但是当你点击一个按钮时，任何大小都不在那个范围内，它会显示正确的div和all。如何激活这些尺寸的按钮？

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> 

非常感谢任何帮助！

Answer 1

你的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;
}

Answer 2

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

果然，它下方的那一行似乎浮在它上面。

您需要做的就是确保带有按钮的行实际上是一个Bootstrap行：

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

这将清除列上的浮动，并返回该行的高度。

希望这有帮助！