入力検索ボックスを上にして反応的なサイズ変更

Question

私は以下の問題があります。このリンクでビデオを見る場合は、問題を理解することができます

https://www.dropbox.com/s/0k900m3tyxse756/screencast.mov?dl=0

私は、ブラウザウィンドウのサイズを変更すると、入力された検索フィールドがまだ表にオーバーフローを引き起こして表示されます。 明らかに、datatableは、応答オプション付きのjavascriptで初期化されています。 がここにHTMLです：

<section class="content"> 
<div class="container-fluid"> 
    <div class="block-header"> 
     <h2> 
      VISUALIZZAZIONE OFFERTE ABITATIVE 
      <small>Qui potrai visualizzare e ricercare qualsiasi offerta abitativa.</small> 
     </h2> 
    </div> 
    <div class="row clearfix"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
      <div class="card"> 
       <div class="body"> 
        {$sizeOffers = count($offers)} 
        {if $sizeOffers gt 0} 
         {include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/offers.tpl'} 
        {else} 
         <div class="alert alert-warning"> 
          Non c'&egrave; nessuna offerta abitativa da visualizzare. Clicca sul pulsante in basso per inserirne una ora. 
         </div> 
        {/if} 
        <hr> 
        <div class="text-center"> 
         <a href="/residentialoffer/add" class="btn btn-primary waves-effect">Aggiugi un'offerta</a> 
         {include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/back_button.tpl'} 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    {include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/token_field.tpl'} 
</div> 

あなたが見ることができるように、offers.tplが含まれたファイルで、含まれています：あなたは私を

<table id="{$id|default:'offers-table'}" class="table table-striped table-bordered table-hover dt-responsive"> 
<thead> 
<tr> 
    <th>Azioni</th> 
    <th>Identificativo</th> 
    {if !isset($from_contact)} 
     <th>Offerente</th> 
    {/if} 
    <th>Affitto/Vendita</th> 
    <th>Comune</th> 
    <th>Telefono</th> 
    <th>Provenienza</th> 
    <th>Tipologia</th> 
    <th>Prezzo</th> 
</tr> 
<tr> 
    <th>Azioni</th> 
    <th>Identificativo</th> 
    {if !isset($from_contact)} 
     <th>Offerente</th> 
    {/if} 
    <th>Affitto/Vendita</th> 
    <th>Comune</th> 
    <th>Telefono</th> 
    <th>Provenienza</th> 
    <th>Tipologia</th> 
    <th>Prezzo</th> 
</tr> 
</thead> 
<tbody> 
...... 
</tbody> 

助けることができますか？

Answer 1

.table応答内の任意の.tableをラップすることにより、応答性のテーブルを作成します。

<div class="table-responsive"> 
    <table class="table"> 
    ... 
    </table> 
</div>