响应表或引导网格系统

我想弄清楚使某个页面响应的最佳方式。 https://secure.taxcollector.com/ptaxweb/如果您打开接受它会将您带到页面我正在尝试使用引导进行响应。响应表或引导网格系统

至于现在我有一个表，但是当我使用它的表弄乱我的按钮的间距：

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

    <div id="searchoptions" class="row"> 
     <div class="form-group"> 
      <div class="col-lg-3"> 
       <button type="button" class="btn btn-default" id="accountNumber" name="accountNumber">PROPERTY ID</button> 
      </div> 
      <div class="col-lg-3"> 
       <button type="button" class="btn btn-default" id="name" name="name">OWNER NAME</button> 
      </div> 
      <div class="col-lg-3"> 
       <button type="button" class="btn btn-default" id="location" name="location">PROPERTY ADDRESS</button> 
      </div> 
      <div class="col-lg-3"> 
       <button type="button" class="btn btn-default" id="billingAddress" name="billingAddress">BILLING ADDRESS</button> 
      </div> 
     </div> 
    </div>

它会更好，以

<table class="display responsive no-wrap" cellspacing="0" width="100%"> 
     <tr> 
      <td><strong>1. SEARCH PROPERTIES BY CLICKING <u>ONE</u> OF THE FOLLOWING BUTTONS:</strong></td> 
     </tr> 
     <tr> 
      <td><input type="button" class="searchByActiveButton" onclick="changeSearchBy('accountNumber')" value="PROPERTY ID" id="accountNumber" name="accountNumber" /></td> 
      <td><input type="button" class="searchByButton" onclick="changeSearchBy('name')" value="OWNER NAME" id="name" name="name" /></td> 
      <td><input type="button" class="searchByButton" onclick="changeSearchBy('location')" value="PROPERTY ADDRESS" id="location" name="location" /></td> 
      <td><input type="button" class="searchByButton" onclick="changeSearchBy('billingAddress')" value="BILLING ADDRESS" id="billingAddress" name="billingAddress" /></td> 
     </tr> 
    </table>

或...使用网格系统呢？是否有可能重新创建这些表，只是使用bootstraps网格系统使其响应？

来源

2017-02-27 David Brierton

您可以引导脊髓痨响应为well..just使用网格系统使用class='table responsive'

检查片段

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      <style type="text/css"> 
 
      
 
      </style> 
 
      </head> 
 
      <body> 
 
    <table class="display table-responsive" cellspacing="0" width="100%"> 
 
     <tr> 
 
      <td><strong>1. SEARCH PROPERTIES BY CLICKING <u>ONE</u> OF THE FOLLOWING BUTTONS:</strong></td> 
 
     </tr> 
 
     <tr> 
 
      <td><input type="button" class="searchByActiveButton" onclick="changeSearchBy('accountNumber')" value="PROPERTY ID" id="accountNumber" name="accountNumber" /></td> 
 
      <td><input type="button" class="searchByButton" onclick="changeSearchBy('name')" value="OWNER NAME" id="name" name="name" /></td> 
 
      <td><input type="button" class="searchByButton" onclick="changeSearchBy('location')" value="PROPERTY ADDRESS" id="location" name="location" /></td> 
 
      <td><input type="button" class="searchByButton" onclick="changeSearchBy('billingAddress')" value="BILLING ADDRESS" id="billingAddress" name="billingAddress" /></td> 
 
     </tr> 
 
    </table> 
 
</body> 
 
    </html>

间隔均匀buttonds

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      <style type="text/css"> 
 
      .btn-sm { 
 
       display: inline-block; 
 
      } 
 
      </style> 
 
      </head> 
 
      <body> 
 
      <div class="container-fluid"> 
 
      <div class="row"> 
 
    
 
     <h1><strong>1. SEARCH PROPERTIES BY CLICKING <u>ONE</u> OF THE FOLLOWING BUTTONS:</strong></h1> 
 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
 
      <input type="button" class="searchByActiveButton btn-xs" onclick="changeSearchBy('accountNumber')" value="PROPERTY ID" id="accountNumber" name="accountNumber" /> 
 
      
 
      <input type="button" class="searchByButton btn-xs" onclick="changeSearchBy('name')" value="OWNER NAME" id="name" name="name" /> 
 
      <input type="button" class="searchByButton btn-xs" onclick="changeSearchBy('location')" value="PROPERTY ADDRESS" id="location" name="location" /> 
 
      <input type="button" class="searchByButton btn-xs" onclick="changeSearchBy('billingAddress')" value="BILLING ADDRESS" id="billingAddress" name="billingAddress" /></div> 
 
     
 
    </div> 
 
    </div> 
 
</body> 
 
    </html>

来源

2017-02-27 14:30:11 neophyte

你看到的按钮有关系吗？四个按钮之间应该均匀分布。那是我无法弄清楚的。因为第一个按钮的上面有标签的间距。但upvote回答:) –

很肯定，我也有响应，这也是同样的权利？ –

不，没有在bootstrap 3中称为响应的本机类..我有另一个snipet为均匀间隔按钮来完成我的答案 – neophyte

响应表或引导网格系统

回答

相关问题