ブートストラップ - モダルの幅をコンテンツに合わせて調整する

Question

widthプロパティを固定値に設定しなくても、モーダルの幅を調整して内容に合わせることができるかどうかは不思議です。私は水平スクロールバーも置いてはいけません。私はoverflow-xプロパティを設定しようとしましたが、成功しませんでした。可能であれば、私はこのためにjQueryを使用したくありません。 CSSを変更するだけです。ここscreenshotです：

は、ここでは、コードです：.modal-dialog要素にwidth: auto;を適用

<!-- Modal --> 
<div class="modal fade" id="tableWorklog" tabindex="-1" role="dialog"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> <!--Modal Header --> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title">Member name's Worklog</h4> 
     </div> <!-- /header --> 
<div class="modal-body"> <!--Modal Body --> 
    <table class="table table-striped"> 
     <thead> 
      <tr> 
       <th>Task Name</th> 
       <th>Location</th> 
       <th>Collab</th> 
       <th>Description</th> 
       <th>Start</th> 
       <th>End</th> 
       <th>Total</th> 
       <th>Type</th> 
       <th>Status</th> 
       <th>Breaklog</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>task 1</td> 
       <td>url</td> 
       <td>NONE</td> 
       <td>something about the task</td> 
       <td>Date + time</td> 
       <td>Date + time</td> 
       <td><span class="label label-success">00:00:00</span></td> 
       <td>Timer</td> 
       <td><span class="label label-warning">ongoing</span></td> 
       <td><span class="label label-danger">Breaklog(number)</span></td> 
      </tr> 
     </tbody> 
     <tfoot> 
      <tr> 
       <th>Total Hours</th> 
       <th>&nbsp;</th> 
       <th>&nbsp;</th> 
       <th>&nbsp;</th> 
       <th>&nbsp;</th> 
       <th>&nbsp;</th> 
       <th>00:00:00</th> 
       <th>&nbsp;</th> 
       <th>&nbsp;</th> 
       <th>&nbsp;</th> 
      </tr> 
     </tfoot> 
    </table> 
</div> <!-- /body --> 
     <div class="modal-footer"> <!-- Modal Footer --> 
     <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> 
     </div> <!-- /footer --> 
    </div> 
    </div> 
</div> <!-- /modal --> 

Answer 1

はそれを行う必要があります。

.modal-dialog { 
    width: auto; 
    max-width: 960px; // Optional, maximum width 
} 

JSFiddle Working Example