テーブルの列のテキスト入力のサイズが小さくなりました

Question

私はフォームを持っていて、すべての入力はテーブルtdの中に設定されています。テーブルの行にテキスト入力とブートストラップ選択を使用します。

システム内のすべての入力が正常な解像度で正しく表示されます。

低解像度またはズームで表示するとテキスト入力の表示サイズが小さくなりますが、ブートストラップ選択はタイトルテキストまたはオプションテキストを超えて縮小されず、同じままです。 テーブルの行幅も同じです。つまり、画面幅を超えてスクロールして拡大するのではなく、画面幅に収まるようにします。

テキスト入力で表示サイズを小さくしないようにしたい。 以下は私のコードです。ブートストラップのマニュアルに従って.table-responsiveクラスの中にネストする

<div class="span6"> 
<table id="target-tables" 
    class="table table-responsive table-striped table-bordered table-hover no-margin no-border"> 
    <thead> 
     <tr> 

      <th class="no-border" >Title1</th> 
      <th class="no-border" >Title2</th> 
      <th class="no-border" >Title3</th> 
      <th class="no-border" >Title4</th> 
      <th class="no-border" >Title5</th> 
      <th class="no-border" >Title6</th> 
      <th class="no-border" >Title7</th> 
      <th class="no-border" >Title8</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <div class="col-xs-12 nopadding"> 
        <select class="selectpicker form-element" title='Select a database' > 
         <option value=".....">......</option> 
        </select> 
       </div> 
      </td> 

      <td> 
       <div class="col-xs-12 nopadding"> 
        <input type="text" class="form-element form-control input-md"/> 
       </div> 
      </td> 

      <td> 
       <div class="col-xs-12 nopadding"> 
        <select class="selectpicker form-element" multiple title="........." > 
         <option value="......">.....</option> 
        </select> 
       </div> 
      </td> 

      <td> 
       <div class="col-xs-12 nopadding"> 
        <input type="text" class="form-element form-control input-md" /> 
       </div> 
      </td> 

      <td> 
       <div class="col-xs-12 nopadding"> 
        <input type="text" class="form-element form-control input-md" /> 
       </div> 
      </td> 

      <td> 
       <div class="col-xs-12 nopadding"> 
        <input type="text" class="form-element form-control input-md" /> 
       </div> 
      </td> 

      <td> 
       <div class="col-xs-12 nopadding"> 
        <select class="selectpicker form-element" title="........." > 
         <option value="...">........</option> 
        </select> 
       </div> 
      </td> 
      <td> 
       <div class="col-xs-12 nopadding"> 
        <select class="selectpicker form-element" > 
         <option value="......">........</option> 
        </select> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
    </table> 

Answer 1

あなた.tableニーズ：

応答テーブル .table応答 内の任意の.tableをラップすることにより、応答性のテーブルを作成します。小さなデバイスで水平方向にスクロールさせるには （768px未満）。幅が768pxを超えるものを見ると、 にはこれらの表の違いは表示されません。

.tableと同じ要素に.table-responsiveがあります。