个人中心
文章发布
退出
作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont？
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
24
4
我使用的是 Bootstrap 3，我有一个相当标准的页面布局:左侧有一个较宽的列 (.col-md-8)，包含纯文本，左侧有一个较窄的列右侧 (.col-md-4)，包含一个表单。
每个表单字段依次包含在 .form-group 中。
在my first attempt , .form-groups 溢出了包含列的左右边缘。 (确保 JSFiddle 预览框架至少与 Bootstrap 的 sm 断点一样宽。)我添加了一个粉红色背景 div 来显示 .form-groups 应该 呆在里面。
在my second attempt ，我在 .col-md-4 中添加了一个 .container，然后将每个 .form-group 包裹在一个 中.row 和 .col-md-4。
这确实有效，但是...这是正确且首选的方法吗？似乎有很多额外的样板标记来实现本应自然发生的事情。
Bootstrap 文档非常好，但它们掩盖了一些像这样的“大图”。也许这些东西对于已经使用过响应式 CSS 的人来说是显而易见的，但对于像我这样的初学者来说可能会很困惑。
这是我第一次尝试的代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
</script>
<head>
<body>
<div class="container">
<h1>Broken version</h1>
<h2>Don't forget to expand the width of this preview window. Otherwise you'll just see Boostrap's xs (vertically stacked) layout.</h2>
<div class="row">
<div class="col-md-8">
<div style="background-color: orange;">
<p>This column will be filled with text. Lorem ipsum dolor sit amet...</p>
</div>
</div> <!-- .col-md-8 -->
<div class="col-md-4">
<div style="background-color: pink;">
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="control-label" for="name">Name</label>
<input class="form-control" type="text" name="name" id="name">
</div>
<div class="form-group">
<label class="control-label" for="email">Email</label>
<input class="form-control" type="email" name="email" id="email">
</div>
<button type="submit">Submit</button>
</form>
</div> <!-- pink background div -->
</div> <!-- .col-md-4 -->
</div> <!-- .row -->
</div> <!-- .container -->
</body>
</html>
这是我第二次可能已更正尝试的代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
</head>
<body>
<div class="container">
<h1>Corrected (?) version</h1>
<h2>Don't forget to expand the width of this preview window. Otherwise you'll just see Boostrap's xs (vertically stacked) layout.</h2>
<div class="row">
<div class="col-md-8">
<div style="background-color: orange;">
<p>This column will be filled with text. Lorem ipsum dolor sit amet...</p>
</div>
</div> <!-- .col-md-8 -->
<div class="col-md-4">
<div style="background-color: pink;">
<div class="container">
<form role="form" class="form-horizontal">
<div class="row">
<div class="form-group col-md-4">
<label class="control-label" for="name">Name</label>
<input class="form-control" type="text" name="name" id="name">
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label class="control-label" for="email">Email</label>
<input class="form-control" type="email" name="email" id="email">
</div>
</div>
<button type="submit">Submit</button>
</form>
</div> <!-- .container -->
</div> <!-- .pink background div -->
</div> <!-- .col-md-4 -->
</div> <!-- .row -->
</div> <!-- .container -->
</body>
</html>
最佳答案
之前的两个答案都没有阅读 Bootstrap 文档。
您不需要使用 .form-horizontal 所以不要使用，因为这不是 .form-horizontal 情况。查看文档中的 .form-horizontal 示例，这不是您要使用该类的地方。在表单上不使用任何类，那么您不需要 .container 将 .form-group 上的负边距清零。
与没有 .form-horizontal 和没有嵌套 .container 的你的一样(阅读文档)。
还有这个:
<div class="form-group col-md-4">
就像将列类放在 .row 上，它会把事情搞得一团糟。
只需使用:
<div class="form-group">
关于css - Bootstrap 3 : How are form-groups meant to be used inside of columns?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26304184/
24
4
0
这正确地呈现了标题，因为我可以看到一个列带有“Product ID”标题的表：。我正试图重构它，这样我就可以重用它，因为它们在整个应用程序中几乎是相同的：。在这种情况下，头不会呈现...检查页面元素中
我什至不知道如何表达这一点，但在 Python 中有没有一种方法可以引用等号之前的文本，而无需实际再次编写？ ** 编辑 - 我在 Jupyter 中使用 python3 我似乎用了半辈子的时间来写作
假设我有一个包含以下列的字典 dict_ = [ {'key1': 'value1', 'key2': 'value2', 'key3': 'value3', '
假设我有一个包含以下列的字典 dict_ = [ {'key1': 'value1', 'key2': 'value2', 'key3': 'value3', '
假设我的数据库中有一张地铁 map ，其中每条线路的每个站点都是一行。如果我想知道我的线路在哪里互连: mysql> SELECT LineA.stop_id FROM LineA, LineB WH
代码 select c1,c2,c3,c4,c5,c6 from table where c5 in ('a', 'b') 从这里开始，我想将 c5 列拆分为两列，然后根据它们对 c
我正在尝试搜索表格中的两列，即标题和描述。但我想先搜索标题，然后再搜索描述。所以匹配标题的所有行排在第一位，所有匹配描述的行排在第二位 我可以使用单个 SQL 查询来实现吗？ 最佳答案 您还可以使用
下面有以下 Python 数据框。 “标志”字段是我想要用代码创建的所需列。 我想要执行以下操作: 如果“分配类型”是预测的并且“Activities_Counter”大于 10，我想创建一个名为“F
我有两列，area 和 block，其中 area 是一个 int 类型，block 是一个 varchar。 现在我正在写两个查询: select * from table where area a
使用 Slick 2，我试图生成一个带有元组 IN 子句的查询: select * from my_table where (a, b) IN ((1, 87)); 给定: val seq: Seq[
我正在尝试从数据透视表中获取一组值，其中 A 列等于值数组，例如 ID 12 的 attribute_value_id 等于 3 和 9。这可以做到吗？我已经走了这么远... ID | post_id
我找不到这样做的有效方法。我在 Python 中有以下 DataFrame，列从 A 到 Z A B C ... Z 0 2.0 8.0 1.0 ... 5.0 1
我的数据框中有以下格式的数据: >>> df = pd.DataFrame(np.random.randn(6,4),index=dates,columns=list('ABCD')) >>> df
我有多个与我公司销售的产品相关的表被新产品取代，随着时间的推移，这导致了多个表的出现。 我一遍又一遍地使用以下查询，直到最终表中只剩下 2 个产品... CREATE TABLE mar15a
我有如下 2 个表:- 表A ------------------------------- | product_id | price | --------------------
我有一个名为 tbl_mainsheet7 的表，创建方式如下: pk_mainsheet client_id project_id mainsheet_id project_cat EA_
我得到了以下 HTML 结构: ... ... 我的 CSS: #main-container { width:80%; margin:20px auto;
对于我的以下要求，我无法获得解决方案。 如果 data.table(如下)在 Col1 和 Col3 中有匹配的值。替换 Col2 值(旧的 New-Val)。 Col1 Col2 Col3
我正在通过连接几个表来构建一个 View ，以通过 Entity Framework 提取数据。由于此 View 没有唯一列，EntityFramework 无法检索正确的结果集(即第一列重复)。 为
好的，我已经尝试了太久了，是时候寻求帮助了。我有一个看起来有点像这样的数据框: person fruit quantity all_fruits 0 p1 grapes 2
我是一名优秀的程序员,十分优秀！