asp.net - Twitter Bootstrap - 模态格式的表单 - ASP.NET

标签 asp.net twitter-bootstrap twitter-bootstrap-3 modal-dialog

我有一个模态表单，如果主窗口不太宽(标签位于字段上方)，它的格式会完美。但是，如果浏览器最大化或足够大，它会更改模式内内容的布局，以便标签现在位于字段的左侧(这意味着每行一个单词，看起来非常困惑)。

知道如何克服这种行为，以便类 form-horizo​​ntal 适用于模式的宽度，而不是浏览器窗口的宽度吗？

使用代码更新:

这是模态的结构

<div id="CCNewModal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
                 <h4 id="CCTitle" runat="server" class="modal-title">New Credit Card</h4>

            </div>
            <div class="modal-body">
                <div>
                    <fieldset>
                        <div id="selectCardDiv" class="form-group">
                            <label id="selectCardLabel" class="col-lg-2 control-label" for="selectCard">Card Type</label>
                            <div class="col-lg-10">
                                <select class="form-control" id="selectCard" runat="server">
                                    <option value="0">Select Card</option>
                                    <option value="Amex">Amex</option>
                                    <option value="MasterCard">MasterCard</option>
                                    <option value="Visa">Visa</option>
                                </select>
                            </div>
                        </div>
                        <div id="selectNameDiv" class="form-group">
                            <label id="selectNameLabel" class="col-lg-2 control-label" for="inputCCName">Name</label>
                            <div class="col-lg-10">
                                <input class="form-control" id="inputCCName" runat="server" type="text" placeholder="Name (as on statement)">
                            </div>
                        </div>
                        <div id="selectNumberDiv" class="form-group">
                            <label id="selectNumberLabel" class="col-lg-2 control-label" for="inputCCNumber">Number</label>
                            <div class="col-lg-10">
                                <input class="form-control" id="inputCCNumber" runat="server" type="text" placeholder="Credit Card Number (no spaces)">
                            </div>
                        </div>
                        <div id="selectMonthDiv" class="form-group">
                            <label id="selectMonthLabel" class="col-lg-2 control-label" for="selectMonth">Expiry Month</label>
                            <div class="col-lg-10">
                                <select class="form-control" id="selectMonth" runat="server">
                                    <option value="0">Month</option>
                                    <option value="01">Jan</option>
                                    <option value="02">Feb</option>
                                    <option value="03">Mar</option>
                                    <option value="04">Apr</option>
                                    <option value="05">May</option>
                                    <option value="06">Jun</option>
                                    <option value="07">Jul</option>
                                    <option value="08">Aug</option>
                                    <option value="09">Sep</option>
                                    <option value="10">Oct</option>
                                    <option value="11">Nov</option>
                                    <option value="12">Dec</option>
                                </select>
                            </div>
                        </div>
                        <div id="selectYearDiv" class="form-group">
                            <label id="selectYearLabel" class="col-lg-2 control-label" for="selectYear">Expiry Year</label>
                            <div class="col-lg-10">
                                <select class="form-control" id="selectYear" runat="server"></select>
                            </div>
                        </div>
                        <div id="selectCVVDiv" class="form-group">
                            <label id="selectCVVLabel" class="col-lg-2 control-label" for="inputCVV">CVV</label>
                            <div class="col-lg-10">
                                <input class="form-control" id="inputCVV" runat="server" type="text" placeholder="Security Code (CVV)">
                            </div>
                        </div>
                        <div id="selectBillingAddressDiv" class="form-group">
                            <label id="selectBillingAddressLabel" class="col-lg-2 control-label" for="inputBillingAddress">Billing Address</label>
                            <div class="col-lg-10">
                                <textarea class="form-control" id="inputBillingAddress" runat="server" rows="3" placeholder="Address as on Statement"></textarea>
                            </div>
                        </div>
                        <div id="selectBillingCityDiv" class="form-group">
                            <label id="selectBillingCityLabel" class="col-lg-2 control-label" for="inputCCCity">City</label>
                            <div class="col-lg-10">
                                <input class="form-control" id="inputCCCity" runat="server" type="text" placeholder="City">
                            </div>
                        </div>
                        <div id="selectBillingStateDiv" class="form-group">
                            <label id="selectBillingStateLabel" class="col-lg-2 control-label" for="selectState">State</label>
                            <div class="col-lg-10">
                                <select class="form-control" id="selectState" runat="server">
                                    <option value="0">Select State</option>
                                    <option value="AL">Alabama</option>
                                    <option value="AK">Alaska</option>
                                    <option value="AZ">Arizona</option>
                                    <option value="AR">Arkansas</option>
                                    <option value="CA">California</option>
                                    <option value="CO">Colorado</option>
                                    <option value="CT">Connecticut</option>
                                    <option value="DE">Delaware</option>
                                    <option value="DC">District of Columbia</option>
                                    <option value="FL">Florida</option>
                                    <option value="GA">Georgia</option>
                                    <option value="HI">Hawaii</option>
                                    <option value="ID">Idaho</option>
                                    <option value="IL">Illinois</option>
                                    <option value="IN">Indiana</option>
                                    <option value="IA">Iowa</option>
                                    <option value="KS">Kansas</option>
                                    <option value="KY">Kentucky</option>
                                    <option value="LA">Louisiana</option>
                                    <option value="ME">Maine</option>
                                    <option value="MD">Maryland</option>
                                    <option value="MA">Massachusetts</option>
                                    <option value="MI">Michigan</option>
                                    <option value="MN">Minnesota</option>
                                    <option value="MS">Mississippi</option>
                                    <option value="MO">Missouri</option>
                                    <option value="MT">Montana</option>
                                    <option value="NE">Nebraska</option>
                                    <option value="NV">Nevada</option>
                                    <option value="NH">New Hampshire</option>
                                    <option value="NJ">New Jersey</option>
                                    <option value="NM">New Mexico</option>
                                    <option value="NY">New York</option>
                                    <option value="NC">North Carolina</option>
                                    <option value="ND">North Dakota</option>
                                    <option value="OH">Ohio</option>
                                    <option value="OK">Oklahoma</option>
                                    <option value="OR">Oregon</option>
                                    <option value="PA">Pennsylvania</option>
                                    <option value="RI">Rhode Island</option>
                                    <option value="SC">South Carolina</option>
                                    <option value="SD">South Dakota</option>
                                    <option value="TN">Tennessee</option>
                                    <option value="TX">Texas</option>
                                    <option value="UT">Utah</option>
                                    <option value="VT">Vermont</option>
                                    <option value="VA">Virginia</option>
                                    <option value="WA">Washington</option>
                                    <option value="WV">West Virginia</option>
                                    <option value="WI">Wisconsin</option>
                                    <option value="WY">Wyoming</option>
                                </select>
                            </div>
                        </div>
                        <div id="selectBillingZipDiv" class="form-group">
                            <label id="selectBillingZipLabel" class="col-lg-2 control-label" for="inputCCZip">Zip / Postcode</label>
                            <div class="col-lg-10">
                                <input class="form-control" id="inputCCZip" runat="server" type="text" placeholder="City">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label" for="inputCCCountry">Country</label>
                            <div class="col-lg-10">
                                <input disabled="" value="United States" class="form-control" id="inputCCCountry" runat="server" type="text" placeholder="City">
                            </div>
                        </div>
                        <div id="selectTelephoneDiv" class="form-group">
                            <label id="selectTelephoneLabel" class="col-lg-2 control-label" for="inputCCTelephone">Telephone</label>
                            <div class="col-lg-10">
                                <input class="form-control" id="inputCCTelephone" runat="server" type="text" placeholder="Telephone (format as 123-456-7890)">
                            </div>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input id="selectPrimaryCB" runat="server" type="checkbox" checked>Primary (default) card</label>
                        </div>
                    </fieldset>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
                <button id="CreditCardSaveButton" runat="server" class="btn btn-primary" type="button">Save</button>
            </div>
        </div>
    </div>
</div>

以及以下 CCS 覆盖

#CCNewModal .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

母版页基本上是 - 我正在处理的页面适合 MainContent 占位符

<form runat="server" class="form-horizontal">

<div class="container body-content">

        <asp:ContentPlaceHolder ID="MainContent" runat="server">
        </asp:ContentPlaceHolder>
        <hr />
        <footer>
            <asp:Label ID="FooterLabel" runat="server" Font-Size="Small"></asp:Label>
        </footer>
    </div>

</form>

这就是使用 form-vertical 的表单的样子

screenshot one

..它确实使用模态格式处理了一个数字

screenshot two

..使用form-horizo​​ntal(宽和窄)

screenshot three

screenshot four

screenshot five

screenshot six

最佳答案

Can I override this behavior so that the class form-horizontal is working to the width of the modal, not the browser window?

简而言之，不。form-horizo​​ntal 的样式基于针对窗口大小运行的媒体查询。媒体查询不能针对其他元素的大小运行。当然，您可以使用 javascript 计算其他元素的大小并相应地更改其他元素，但是您将失去使用普通旧 CSS 并让浏览器完成工作的所有 native 性能优势。

If the browser is maximised or large enough it alters the layout of the contents inside the modal so that the labels are now to the left of the fields

但这正是水平表单的作用。如果您不想要这种功能，为什么不将其更改为基本形式呢？听起来，即使这不是模式窗口的空间限制，如果您有很长的标签名称并且没有足够的列宽度来将它们显示在单行上，那么此表单也会遇到麻烦。

这是模态中水平表单的示例

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalHorizontal">
    Launch Horizontal Form
</button>

<!-- Modal -->
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" 
                   data-dismiss="modal">
                       <span aria-hidden="true">&times;</span>
                       <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Modal title
                </h4>
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
                
                <form class="form-horizontal" role="form">
                  <div class="form-group">
                    <label  class="col-sm-2 control-label"
                              for="inputEmail3">Email</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" 
                        id="inputEmail3" placeholder="Email"/>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-2 control-label"
                          for="inputPassword3" >Password</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control"
                            id="inputPassword3" placeholder="Password"/>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                      <div class="checkbox">
                        <label>
                            <input type="checkbox"/> Remember me
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                      <button type="submit" class="btn btn-default">Sign in</button>
                    </div>
                  </div>
                </form>
                
            </div>
            
            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">
                            Close
                </button>
                <button type="button" class="btn btn-primary">
                    Save changes
                </button>
            </div>
        </div>
    </div>
</div>

Horizontal Screenshot

这是一个在所有屏幕尺寸下都保持其结构的基本表单示例:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalNorm">
    Launch Normal Form
</button>

<!-- Modal -->
<div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" 
                   data-dismiss="modal">
                       <span aria-hidden="true">&times;</span>
                       <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Modal title
                </h4>
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
                
                <form role="form">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                      <input type="email" class="form-control"
                      id="exampleInputEmail1" placeholder="Enter email"/>
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                      <input type="password" class="form-control"
                          id="exampleInputPassword1" placeholder="Password"/>
                  </div>
                  <div class="checkbox">
                    <label>
                        <input type="checkbox"/> Check me out
                    </label>
                  </div>
                  <button type="submit" class="btn btn-default">Submit</button>
                </form>
                
                
            </div>
            
            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">
                            Close
                </button>
                <button type="button" class="btn btn-primary">
                    Save changes
                </button>
            </div>
        </div>
    </div>
</div>

Basic Screenshot

或者，如果您对标记没有太多控制权，您可以尝试覆盖 .form-horizo​​ntal 应用的一些样式。您可以添加一些像这样的CSS(取决于水平表单的结构)

.modal-body .form-horizontal .col-sm-2,
.modal-body .form-horizontal .col-sm-10 {
    width: 100%
}

.modal-body .form-horizontal .control-label {
    text-align: left;
}
.modal-body .form-horizontal .col-sm-offset-2 {
    margin-left: 15px;
}

CSS 水平表单

.modal-body .form-horizontal .col-sm-2,
.modal-body .form-horizontal .col-sm-10 {
  width: 100%
}

.modal-body .form-horizontal .control-label {
  text-align: left;
}
.modal-body .form-horizontal .col-sm-offset-2 {
  margin-left: 15px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalHorizontal">
    Launch Horizontal Form
</button>

<!-- Modal -->
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" 
                   data-dismiss="modal">
                       <span aria-hidden="true">&times;</span>
                       <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Modal title
                </h4>
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
                
                <form class="form-horizontal" role="form">
                  <div class="form-group">
                    <label  class="col-sm-2 control-label"
                              for="inputEmail3">Email</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" 
                        id="inputEmail3" placeholder="Email"/>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-2 control-label"
                          for="inputPassword3" >Password</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control"
                            id="inputPassword3" placeholder="Password"/>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                      <div class="checkbox">
                        <label>
                            <input type="checkbox"/> Remember me
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                      <button type="submit" class="btn btn-default">Sign in</button>
                    </div>
                  </div>
                </form>
                
            </div>
            
            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">
                            Close
                </button>
                <button type="button" class="btn btn-primary">
                    Save changes
                </button>
            </div>
        </div>
    </div>
</div>

Horizontal Fix Screenshot

Here's a Demo in jsFiddle

关于asp.net - Twitter Bootstrap - 模态格式的表单 - ASP.NET，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26562900/

上一篇：jakarta-ee - 将远程 EJB 公开为 CDI bean

下一篇：r - 将相似的图分组到条形图中

相关文章：

jquery - 将 Bootstrap Active nav-pills 选项卡边框底部形状更改为实线下划线

jquery-ui - 在 Bootstrap 3 模式中使用 jQuery DatePicker

c# - 如何在 MVC Controller 之外返回 StatusCode 对象

c# - 如何在 C# 中使用我的软件设置在客户端系统上安装 MySQL 服务器？

javascript - Bootstrap Accordion Expand Height with D3 Graph 的奇怪行为

javascript - Cordova 和 Bootstrap : unable to open a modal via javascript

html - 当有空间时，Bootstrap 列必须移到一边

html - Twitter bootstrap 3 navbar navbar-right outside navbar-collapse

javascript - 使用 Javascript 连接到 WCF Web 服务

asp.net - 从下拉列表中获取选定的值

©2024 IT工具网  联系我们