Twitter的引导 - 形式模态的格式 - ASP.NET
问题描述 投票：2回答：1
我在该格式化完美如果主窗口不是太宽（与上面的字段标签）模态的形式。但是，如果浏览器最大化或足够大，它会改变内容的布局模式内部，使得唱片公司现在的字段（这意味着一个字，每行，看起来非常凌乱）的左侧。
任何想法如何克服那么该类形式的水平正在努力的模式，而不是浏览器窗口的宽度这种行为？
与代码更新：
这里是模态的结构
<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>
这是形式的样子用形式垂直
..和它确实到一些与模态格式
使用形式水平（宽和窄的）..
1个回答
3
投票
投票
所以，该类形式的水平正在努力的模式，而不是浏览器窗口的宽度，我可以覆盖这个行为？
总之，对于号的form-horizontal风格是基于对窗口的大小，运行媒体查询。媒体查询不能与其他元素的大小来运行。当然，你可以使用JavaScript找出其他元素的大小，并相应地更改其他元素，但你会失去全部采用普通的旧CSS，让浏览器做的工作的原生性能优势。
如果浏览器最大化或足够大，它改变了语气里面的内容布局，使标签已到田间地头的左
但是，这恰恰是水平的形式做。如果你不希望这样的功能，你为什么不将其更改为基本形式？这听起来像，即使这不是由模态窗口约束的空间，这种形式会遇到麻烦，如果你有长标签名称并没有足够的列宽，以显示他们在一行。
Here's an example of a Horizontal Form in a Modal
<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">×</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 an example of a basic form that maintains it's structure at all screen sizes:
<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">×</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;
}
Horizontal Form with 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">×</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
最新问题
- 在本地复制产品角度构建错误
- 当数据正确发送到 ESP32 时，ESP32 不会处理从 Web 应用程序以 JSON 形式发送的数据
- 如何在文本字段上方显示提示文本
- STRCMP优化
- 在 Serverless Framework 中指定资源时，AWS Step Functions 是否会自动更新 IAM 角色权限？
- 在react中将props作为graphql突变参数传递
- 重新安装应用程序后无法打开下载的文件
- React Hook“useFetch”无法在顶层调用
- 证书验证失败：无法获取本地颁发者证书（_ssl.c:1002）
- MobX 或 SWR 突变中状态更新的部分组件渲染
- Firebase 存储上未捕获类型错误
- 当使用 iOS 应用程序中嵌入的 Safari 变体时（例如，当用户单击 FB Messenger 中的链接时），JavaScript recognize() 不起作用？
- 如何将 v-if 与 HTTP 请求结合使用 - vue.js
- linux下有没有办法连接两个程序的输出/输入？
- 如何过滤Azure搜索索引中的数组Json数据？
- 如何删除 Huggingface 数据集中具有空值的行？
- 如果 PDF 不包含任何图像或流，则压缩 PDF
- 使用ReactJs创建（导出）样式良好的Word文档
- 仅删除 pandas 中完全空的行
- 如何在一组未确定的样本上运行 Snakemake？
© www.soinside.com 2019 - 2024. All rights reserved.