レスポンステーブルまたはブートストラップグリッドシステム

私は、特定のページを反応させる最も良い方法を見つけようとしています。 https://secure.taxcollector.com/ptaxweb/あなたが受け入れると、私はブートストラップを使って反応するようにしようとしているページに移動します。レスポンステーブルまたはブートストラップグリッドシステム

今の時点で私はテーブルを持っているが、私はテーブルを使用する場合、それは私のボタンの間隔が台無し：

<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>

か...

<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>

はそれが方が良いでしょうが代わりにグリッドシステムを使用しますか？これらのテーブルを再作成し、ブートストラップグリッドシステムを使用して応答性にすることは可能ですか？

出典

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

あなたがが、ボタンを参照していますか？ 4つのボタンは、間に均等に配置する必要があります。それは私が把握できないものです。最初のボタンの上にラベルの間隔があるためです。しかし、答えるためのupvote :) –

また、私も同じ権利を行う応答していたか？ –

いいえブートストラップ3で反応するネイティブクラスはありません。私は答えを完成させるために均等に間隔を置いたボタンのための別のスニペットを持っています – neophyte

レスポンステーブルまたはブートストラップグリッドシステム

答えて

関連する問題