如何在Bootstrap中的行之間應用連續邊框？

在大型桌面四格應該出現在一行中。在中等大小的三個div應該出現，並且在小設備中兩個div，並且在移動中只有一個潛水應該出現在一行中。我實現了它。但是我需要所有div都有邊界，並且在兩個連續div之間有一個px缺口應該在那裏。如何在Bootstrap中的行之間應用連續邊框？

我添加了邊框它工作正常，並且當我將div 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>

來源

2014-07-01 Saurabh Mahajan

你不應該直接申請保證金，邊框等網格元素。這需要對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，因爲它更容易）。

http://jsfiddle.net/isherwood/gQere/5/

http://jsfiddle.net/isherwood/gQere/5/embedded/result/

來源

2014-07-01 17:23:38 isherwood

如何在Bootstrap中的行之間應用連續邊框？

回答

相關問題