Question

我有一个twitter bootstrap模态弹出窗口

<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

添加＆＃34;模态范围＆＃34;到主模态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

我希望这对你有用。

如何增加twitter bootstrap模式弹出窗口的模态体的宽度

1 个答案: