響應表或引導網格系統

我想弄清楚使某個頁面響應的最佳方式。 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

響應表或引導網格系統

回答

相關問題