个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
在大型桌面上，四个 div 应该排成一行。在中型设备中应该出现三个 div，在小型设备中应该出现两个 div，在移动设备中只有一个 div 应该出现在一行中。我做到了。但我需要所有的 div 都有边框，并且在两个连续的 div 之间应该有一个 px 的差距。
我添加了边框，效果很好，当我向 div 添加边距 1px 时，在大型桌面上，第四个 div 将移动到下一行。我的 Html 代码是 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="BootstrapFiles/css/bootstrap.min.css">
<style type="text/css">
.bgcolor{
background-color:orange;
}
.divCustom{
border:solid 1px black;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3 divCustom">
Personal Information
<div class="row">
<div class="col-xs-12">
<label class="control-label" for="txtName">Name</label>
<input id="txtName" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<label class="control-label" for="txtDepartment">Department</label>
<input id="txtDepartment" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 divCustom">
Physical Information
<div class="row">
<div class="col-xs-12">
<label class="control-label" for="txtName">Name</label>
<input id="txtName" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<label class="control-label" for="txtDepartment">Department</label>
<input id="txtDepartment" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 divCustom">
Extra Information
<div class="row">
<div class="col-xs-12">
<label class="control-label" for="txtName">Name</label>
<input id="txtName" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<label class="control-label" for="txtDepartment">Department</label>
<input id="txtDepartment" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 divCustom">
Other Information
<div class="row">
<div class="col-xs-12">
<label class="control-label" for="txtName">Name</label>
<input id="txtName" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<label class="control-label" for="txtDepartment">Department</label>
<input id="txtDepartment" class="form-control" />
</div>
</div>
</div>
</div>
</div>
<script src="BootstrapFiles/js/jquery.min.js"></script>
<script src="BootstrapFiles/js/bootstrap.min.js"></script>
</body>
</html>
最佳答案
您不应将边距、边框等直接应用于网格元素。这将需要对 Bootsrap 的 CSS 中的大小进行相应的调整，这使得维护和更新更具挑战性。
相反，将您的样式应用于网格容器内的元素。
http://jsfiddle.net/isherwood/gQere/
.bordered {
border:solid 1px black;
}
<div class="col-sm-6 col-md-4 col-lg-3 divCustom">
<div class="bordered">Personal Information
<div class="row">
<div class="col-xs-12">
<label class="control-label" for="txtName">Name</label>
<input id="txtName" class="form-control" />
</div>
...
根据您的喜好调整 .bordered 上的边距。您可以使用负边距延伸到网格元素之外并获得您提到的 1px 间隙(或者可能是 2px，因为它更容易)。
关于twitter-bootstrap - 如何在 Bootstrap 中的行之间应用连续边框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24515983/
24
4
0
如何检查一个元素是否立即隐藏。即如何通知元素的可见性。 在我的例子中，该元素是通过 slideUp 函数隐藏的。我应该立即收到有关该元素的可见性的通知。 我想到了使用bind()方法。但它没有类似 o
if (srcbloc == NULL) { fprintf(stderr, "warning!: memrip source is null!\n"); exit(1); } if
当我在数据库的旧 View 中清理一些问题时，我遇到了这个“奇怪”的连接条件: from tblEmails [e] join tblPersonEmails [pe]
如何水平对齐多张图像，一张一张地？它们不必适合宽度屏幕:相反，我希望它们超过后者的宽度，如果这有任何意义的话。 我已经检查了很多类似问题的答案，但找不到任何可以解决我的问题的答案。 HTML:
我知道 Cassandra 中的列有 TTL。但是也可以在一行上设置 TTL 吗？在每列上设置 TTL 并不能解决我的问题，如下面的用例所示: 在某些时候，一个进程想要删除一个带有 TTL 的完整行(
我有一个 NSTextField 和 Label，其值绑定(bind)到 View Controller 中的相同 NSString 这里的问题是标签只有在我按 Tab 时才会更新。 如何使其连续，以
例如。 1."abc"; ===>abc 2."ab c"; ===>ab_c 3."ab c"; ===>ab_c 4."ab c" ===>ab_c 对于多个连续空格也是如此。 我怎样
大家好，我想获取前一天或最后一天的信息，只有当我按下按钮时，它才会显示最后一天(星期六)的所有信息，如果我再次单击按钮，它将显示最后一天的信息(星期五)如果我再次点击它(星期四)谢谢你们帮助我 编辑:
我需要从实时音频流中提取ICY元数据，并正在使用mplayer进行此操作，因为它在播放音频流时会输出元数据。我欢迎其他方式执行此操作，目标是将更新的元数据(歌曲信息)保存到文本文件中，只要歌曲(或数据
语音识别有没有解决方案 只有几个字(2 个就够了，10 个就不错了。100 个就很棒了。不需要更多) 也在移动浏览器上运行(是否可以为此使用 flash(而不是 java)？) 可以安装在您自己的服务
我有一个单词列表， list1 = ['hello', 'how', 'are', 'you?', 'i', 'am', 'fine', 'thanks.', 'great!'] 我想加入， list
我正在开发一个程序，但我不断收到“对‘dosell’的 undefined reference ”，我不太明白发生了什么。这是函数的声明: void dosell(int *cash, int *nu
我无法提出执行我要做的事情所需的查询。 我有三个这样的表: client_files ----------------------- client_id file_id ---------
我一直在寻找一个插件/脚本，当到达底部时，它会从头开始继续滚动网站，就像一个连续的循环。 示例:http://unfold.no/和 http://www.aquiesdonde.com.ar/ 我尝
这个问题在这里已经有了答案: How to prevent scanf causing a buffer overflow in C? (6 个答案) 关闭 6 年前。 我一直在使用一个非常简单的程
给定一个整数数组，找到具有相同数量的 x 和 y 的连续子序列的总数。例如 x=1 和 y=2 的数组 [1,2,1] ans = 2 表示它的两个子数组 [1,2] 和 [2,1]。检查每个连续的子
所以，我有一个所有正自然数的数组。我得到了一个阈值。我必须找出总和小于给定阈值的数字(连续)的最大计数。 For example, IP: arr = {3,1,2,1} Threshold = 5
我制作了像内置相机一样的相机应用。 我想实现像内置相机一样的连续对焦功能。(此功能我不触摸屏幕，但相机会尝试自行对焦。) 因此，将其设置为 surfaceCreated : Camera.Pa
我有这样的数据: f x A 1.1 A 2.2 A 3.3 B 3.5 B 3.7 B 3.9 B 4.1 B 4.5 A 5.1 A 5.2 C 5.4 C 5.5 C 6.1 B 6.2 B
假设我有一个包含一组数据点的表，每个数据点由一个时间戳和一个值组成。如果至少有 N 个连续记录(按时间戳排序)高于给定值 X，我将如何编写返回 true (1) 的查询，否则返回 false (0)？
我是一名优秀的程序员,十分优秀！