Как я могу применить непрерывную границу между строками в Bootstrap?
В большом рабочем столе четыре дива должны появиться в одном ряду. В средних размерах должно появиться три дива, а в маленьких устройствах два дива и в мобильных только один дайв должен появиться в одном ряду. Я этого добился. Но мне нужно, чтобы все дивы имели границу, и между двумя непрерывными дивами должен быть один разрыв px.
Я добавил границу, это работает нормально, и как я добавляю margin 1px к div, то в большом рабочем столе четвертый 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>
1 ответ:
Вы не должны применять поля, границы и т. д. непосредственно к элементам сетки. Это потребовало бы соответствующей корректировки размеров в CSS Bootsrap, что делает обслуживание и обновление более сложными.
Вместо этого примените стили к элементам внутри контейнеров сетки.
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, так как это проще).