Question

我正在尝试找出使某个页面响应的最佳方法。 https://secure.taxcollector.com/ptaxweb/如果你点击接受它会带你到我试图使用bootstrap响应的页面。

截至目前，我有一张桌子，但是当我使用桌子时，它会弄乱按钮的间距：

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

使用网格系统会更好吗？是否可以重新创建这些表，并使用bootstraps网格系统使其响应？

Answer 1

您也可以使引导标签响应。只需使用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>

使用网格系统均匀间隔的按钮

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

响应表或bootstraps网格系统

1 个答案: