如何在CSS

时间：2017-06-21 07:43:43

标签： html css twitter-bootstrap

我的整个代码是如何设置间隔b / w div？它必须在所有设备上顺利运行

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
    <div class="container" style="width:100%">
      <div class="row" style="height:33%">
         <div class="col-xs-3" style="height:100%;background-color:#003380;"></div>
        <div class="col-xs-6 text-center"style="height:100%;background-color:#66a3ff;padding-left: 20px">Top </div>
        <div class="col-xs-3 " style="height:100%;background-color:#cce0ff"></div>
      </div>
      <div class="row" style="height:33%">
        <div class="col-xs-3" style="height:100%;background-color:#66a3ff"></div>
      </div>
      <div class="row" style="height:33%">
        <div class="col-xs-3 " style="height:100%;background-color:#cce0ff">left</div>
        <div class="col-xs-6 " style="height:100%;background-color:#66a3ff">Center</div>
        <div class="col-xs-3 " style="height:100%;background-color:#003380">Right </div>  
      </div>
    </div>
</body>

6 个答案:

答案 0 :(得分：0)

尝试将此类添加到样式表

data : {
'_token' : "{{ csrf_token() }}",
'data'   : formData
}

然后将类添加到divs 

Pad-10{
  padding:1%;
}

答案 1 :(得分：0)

有多种方法可以实现这一目标：

  1. 将每个col与另一个col
    2. 包装在一起 

    <html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="screen" />
</head>

<body>
    <div class="container" style="width:100%">
      <div class="row" style="height:33%">
         <div class="col-xs-3"><div class="col-xs-12" style="height:100%;background-color:#003380;"></div></div>
        <div class="col-xs-6"><div class="col-xs-12 text-center"style="height:100%;background-color:#66a3ff;padding-left: 20px">Top </div></div>
        <div class="col-xs-3"><div class="col-xs-12 " style="height:100%;background-color:#cce0ff"></div></div>
      </div>
      <div class="row" style="height:33%">
        <div class="col-xs-3"><div class="col-xs-12 " style="height:100%;background-color:#cce0ff">left</div></div>
        <div class="col-xs-6"><div class="col-xs-12 " style="height:100%;background-color:#66a3ff">Center</div></div>
        <div class="col-xs-3"><div class="col-xs-12 " style="height:100%;background-color:#003380">Right </div></div>  
      </div>
    </div>
</body>

    这将在两列之间创建30px的默认空间

    1. 如果您希望创建更多空间，则可以使用bootstrap中的col-xs-offset类。但这会减少列的大小
    2. 您可以随时使用自己的自定义classes来根据需要更改网格

答案 2 :(得分：0)

最简单的方法是使用flexbox作为弹性项目的行和填充。

.row {
  display: flex;
  justify-content: space-between;
}
.row div { padding: 1em; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="width:100%">
  <div class="row">
    <div class="col-xs-3" style="background-color:#003380;">X</div>
    <div class="col-xs-6 text-center" style="background-color:#66a3ff;">Top </div>
    <div class="col-xs-3 " style="background-color:#cce0ff">X</div>
  </div>
  <div class="row">
    <div class="col-xs-3" style="background-color:#66a3ff">X</div>
  </div>
  <div class="row">
    <div class="col-xs-3 " style="background-color:#cce0ff">left</div>
    <div class="col-xs-6 " style="background-color:#66a3ff">Center</div>
    <div class="col-xs-3 " style="background-color:#003380">Right </div>
  </div>
</div>

答案 3 :(得分：0)

您可以在元素周围包裹另一列，这使得包装列的填充提供某种边距/间距。

以下代码是您的目标吗？

＆＃13;
＆＃13; 
.spacing {
  padding: 15px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
    <div class="container" style="width:100%">
      <div class="row" style="height:33%">
         <div class="col-xs-3 spacing">
           <div class="col-xs-12" style="height:100%;background-color:#003380;"></div>
         </div>
         <div class="col-xs-6 spacing">
        <div class="col-xs-12 text-center"style="height:100%;background-color:#66a3ff;padding-left: 20px">Top </div>
         </div>
         <div class="col-xs-3 spacing">
           <div class="col-xs-12" style="height:100%;background-color:#cce0ff"></div>
         </div>
      </div>
      <div class="row" style="height:33%">
         <div class="col-xs-3 spacing">
           <div class="col-xs-12" style="height:100%;background-color:#66a3ff"></div>
         </div>
      </div>
      <div class="row" style="height:33%">
         <div class="col-xs-3 spacing">
        <div class="col-xs-12" style="height:100%;background-color:#cce0ff">left</div>
         </div>
         <div class="col-xs-6 spacing">
        <div class="col-xs-12" style="height:100%;background-color:#66a3ff">Center</div>
         </div>
         <div class="col-xs-3 spacing">
        <div class="col-xs-12" style="height:100%;background-color:#003380">Right </div>  
         </div>
      </div>
    </div>
</body>
＆＃13;
＆＃13;
＆＃13;

修改

由于您正在寻找所有方向（而不仅是左侧和右侧）的间距，您只需在名为spacing的包装器和以下CSS中添加一个额外的类:(请参阅更新的代码段）

.spacing {
  padding: 15px;
}

答案 4 :(得分：0)

如果我是对的，你需要在类行的div之间留出间距，而容器div和它的子div之间没有间距（div.row）。

为此，您可以向除最后一个div之外的所有div添加底部边距。这可以这样做：

div.row{
margin-bottom: [whatever amount of space you want]; //add bottom margin to the row divs
}
div.row:last-child{
margin-bottom: none; //remove bottom margin from the row div that happens to be the last child in its container(i.e. div.container)
}

如果你想在行的子节点之间有间距：

div.row{
    margin-bottom: [whatever amount of space you want]; //add bottom margin to the row divs
    }
div.row:last-child{
    margin-bottom: none; //remove bottom margin from the row div that happens to be the last child in its container(i.e. div.container)
}
div.col-xs-3{
    margin: [top margin], 0, [bottom margin], 0;
}
div.col-xs-6{
    margin: [topmargin], 0, [bottom margin], 0;
}

答案 5 :(得分：0)

@Aviral Garg请检查以下代码。我在您的代码中修改了样式属性，并添加了类“common_row”＆amp; “common_box”中包含一些属性。您可以在“common_box”类和＆amp;中调整填充。根据您的需要，在“common_row”类中使用margin-bootom。它可以在所有设备上正常工作，因为我在其中添加了网格类。我希望你期待同样的事情。

.common_row{
height:33%;
margin-bottom:10px;
}

.common_row .common_box{
padding:10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container" style="width:100%">
      <div class="row common_row">
         <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 common_box" style="background-color:#003380;"></div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center common_box"style="background-color:#66a3ff;">Top </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 " style="background-color:#cce0ff"></div>
      </div>
      <div class="row common_row" style="height:33%">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 common_box" style="background-color:#66a3ff"></div>
      </div>
      <div class="row common_row">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 common_box" style="background-color:#cce0ff">left</div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 common_box" style="background-color:#66a3ff">Center</div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 common_box" style="background-color:#003380">Right </div>  
      </div>
    </div>

相关问题
最新问题