个人中心
文章发布
退出
作者热门文章
- 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
我在优化 JOIN 以使用复合索引时遇到问题。我的查询是: SELECT p1.id, p1.category_id, p1.tag_id, i.rating FROM products p1
我有一个简单的 SQL 查询，我正在尝试对其进行优化以删除“使用位置；使用临时；使用文件排序”。 这是表格: CREATE TABLE `special_offers` ( `so_id` int
我有一个具有以下结构的应用程序表 app_id VARCHAR(32) NOT NULL, dormant VARCHAR(6) NOT NULL, user_id INT(10) NOT NULL
此查询的正确索引是什么。 我尝试为此查询提供不同的索引组合，但它仍在使用临时文件、文件排序等。 总表数据 - 7,60,346 产品= '连衣裙' - 总行数 = 122 554 CREATE TAB
为什么额外的是“使用where;使用索引”而不是“使用索引”。 CREATE TABLE `pre_count` ( `count_id`
我有一个包含大量记录的数据库，当我使用以下 SQL 加载页面时，速度非常慢。 SELECT goal.title, max(updates.date_updated) as update_sort F
我想知道 Using index condition 和 Using where 之间的区别；使用索引。我认为这两种方法都使用索引来获取第一个结果记录集，并使用 WHERE 条件进行过滤。 Q1。有什
I am using TypeScript 5.2 version, I have following setup:我使用的是TypeScript 5.2版本，我有以下设置： { "
I am using TypeScript 5.2 version, I have following setup:我使用的是TypeScript 5.2版本，我有以下设置： { "
I am using TypeScript 5.2 version, I have following setup:我使用的是TypeScript 5.2版本，我有以下设置： { "
mysql Ver 14.14 Distrib 5.1.58，用于使用 readline 5.1 的 redhat-linux-gnu (x86_64) 我正在接手一个旧项目。我被要求加快速度。我通过
在过去 10 多年左右的时间里，我一直打开数据库 (mysql) 的连接并保持打开状态，直到应用程序关闭。所有查询都在连接上执行。 现在，当我在 Servicestack 网页上看到示例时，我总是看到
我使用 MySQL 为我的站点构建了一个自定义论坛。列表页面本质上是一个包含以下列的表格:主题、上次更新和# Replies。 数据库表有以下列: id name body date topic_id
在mysql中解释的额外字段中你可以得到: 使用索引 使用where;使用索引 两者有什么区别？ 为了更好地解释我的问题，我将使用下表: CREATE TABLE `test` ( `id` bi
我经常看到人们在其Haxe代码中使用关键字using。它似乎在import语句之后。 例如，我发现这是一个代码片段: import haxe.macro.Context; import haxe.ma
这个问题在这里已经有了答案: "reduce" or "apply" using logical functions in Clojure (2 个答案) 关闭 8 年前。 “and”似乎是一个宏，
这个问题在这里已经有了答案: "reduce" or "apply" using logical functions in Clojure (2 个答案) 关闭 8 年前。 “and”似乎是一个宏，
我正在考虑在我的应用程序中使用注册表模式来存储指向某些应用程序窗口和 Pane 的弱指针。应用程序的一般结构如下所示。 该应用程序有一个 MainFrame 顶层窗口，其中有几个子 Pane 。可以有
奇怪的是：。似乎a是b或多或少被定义为id(A)==id(B)。用这种方式制造错误很容易：。有些名字出人意料地出现在Else块中。解决方法很简单，我们应该使用ext==‘.mp3’，但是如果ext表面
我遇到了一个我似乎无法解决的 MySQL 问题。为了能够快速执行用于报告目的的 GROUP BY 查询，我已经将几个表非规范化为以下内容(该表由其他表上的触发器维护，我已经同意了与此): DROP T
我是一名优秀的程序员,十分优秀！