Как увеличить ширину модального-тела Twitter Bootstrap модального всплывающего окна

Question

У меня есть твиттер самозагрузки модального всплывающего окна

<div class="modal fade" id="Div1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 
      aria-hidden="true"> 
      <div class="modal-dialog custom-class"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
          <span aria-hidden="true">&times;</span></button> 
         <h4 class="modal-title" id="H2">Log</h4> 
        </div> 
        <div class="modal-body"> 
        <asp:GridView id ="GridView1" runat="server" AutoGenerateColumns="false" 
        CssClass="table table-hover table-striped" 
        DataKeyNames="FieldID" 
        Font-Name="Verdana" GridLines="Both" 
        Font-Size="10pt" CellPadding="4"> 
        <Columns> 
         Few Columns 
       </Columns> 
       </asp:GridView> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
</div> 
</div>  

И мой CSS является

@media screen and (min-width: 768px) { 
    .custom-class { 
     width: 70%; /* either % (e.g. 60%) or px (400px) */ 
    } 
} 

Но мои изменения CSS не отражает на всплывающем окне

Столбы сетки выходят из тела, я имею в виду, что тело не увеличивается с шириной сетки. Как я могу сделать ширину тела более отзывчивой с помощью

сетки

Answer 1

Добавить «модальной широкий» к главному модальной DIV и настроить ширину в CSS. В этом примере я использую 90%. Поскольку я использую jQuery для установки максимальной высоты области содержимого на основе размеров браузера, модальный размер будет только как можно выше, и при необходимости будет содержать полосу прокрутки.

<a data-toggle="modal" href="#normalModal" class="btn btn-default">Normal</a> 

<a data-toggle="modal" href="#tallModal" class="btn btn-primary">Wide, Tall Content</a> 

<a data-toggle="modal" href="#shortModal" class="btn btn-primary">Wide, Short Content</a> 

<div id="normalModal" class="modal fade"></div> 
<div id="tallModal" class="modal modal-wide fade"></div> 
<div id="shortModal" class="modal modal-wide fade"></div> 

jsFiddle

Я надеюсь, что это будет работать для вас.