Twitter Bootstrap - 模态格式的表单 - ASP.NET答案

【问题标题】：Twitter Bootstrap - form in Modal formatting - ASP.NETTwitter Bootstrap - 模态格式的表单 - ASP.NET
【发布时间】：2014-10-25 13:28:36
【问题描述】：

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

知道我是如何克服这种行为的，从而使 form-horizontal 类工作到模式的宽度，而不是浏览器窗口的宽度？

更新代码：

这是模态的结构

<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 时表单的样子

..它确实用模态格式做了一个数字

.. 使用 form-horizontal（宽和窄）

【问题讨论】：

尝试将模式的内容包装在<div class="row"> 中。如果您使用的是响应式宽度，这会将其宽度限制在模态框的范围内。
试过了——唯一的效果是添加了一个水平滚动条，但格式还是一样的:-(
啊，好吧。您能否发布一些代码，以便我们查看。在这一点上，任何其他建议充其量只是猜测，最坏的情况是可怕的猜测。 :)

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

【解决方案1】：

我是否可以覆盖此行为，以使 form-horizontal 类工作于模态框的宽度，而不是浏览器窗口的宽度？

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

如果浏览器最大化或足够大，它会改变模式内内容的布局，以便标签现在位于字段的左侧

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

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

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

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

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

或者，如果您对标记没有太多控制权，您可以尝试覆盖.form-horizontal 应用的一些样式。你可以像这样添加一些 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>

Here's a Demo in jsFiddle

【讨论】：

感谢您非常详细的回复 :-)
尝试了这两种方法，但结果相同 - 模态标记位于 ASP.NET 页面上，并且表单类在母版页中定义 - 我已将标记添加到原始问题
@gchq，form-horizontal 是否包含插入到您的母版页中的代码？它不在您上传的代码中。
我已更新原始查询以显示母版页布局的基础知识。与 form-horizontal 一起使用，整体效果很好 - form-vertical 将所有字段推到一起，没有任何空间..
以这种方式设计模式的意义何在？您有一个漂亮的页脚，带有粗体的蓝色保存按钮，但提交表单的方法是单击表单内的按钮。显然，保存按钮必须在表单中，否则需要使用 JavaScript 提交表单。