Bootstrap - отрегулируйте ширину модального содержания

Мне просто интересно, можете ли вы отрегулировать ширину модального изображения, чтобы он соответствовал его содержимому, без необходимости устанавливать свойство ширины на фиксированное значение. Я также не хочу ставить горизонтальную полосу прокрутки. Я попытался установить свойство overflow-x, но не был успешным. Если возможно, я не хочу использовать jQuery для этого; просто измените CSS. Вот screenshot:Bootstrap - отрегулируйте ширину модального содержания

Вот код:

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

источник

2016-11-02 Jan Miguel Carangan

Вы не хотите, чтобы положить горизонтальную полосу прокрутки. то вы просто хотите обрезать таблицу? В таблице слишком много данных, поэтому, если вы используете таблицу {table-layout: fixed}, макет обернут, и если вы используете модальное тело {overflow: hidden}, тогда таблица будет вырезана. – Victoria

Я не хочу использовать горизонтальную полосу, поэтому я хочу настроить ширину модаля, чтобы она соответствовала всей таблице. На него ответили, хотя так не волнуйтесь :) –

Применение width: auto; к .modal-dialog элемент должен это делать.

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

JSFiddle Working Example

источник

2016-11-02 19:26:32

Я попробовал width: auto, но поставил его на неправильный класс, поэтому он не сработал. Большое спасибо! –

Bootstrap - отрегулируйте ширину модального содержания

ответ

Смежные вопросы