Question

我想在存档.html

中执行此样式

我希望能够在白色文本区域内书写。

我从这开始：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">    </script>
</head>


<body>

<div class="container">
  <h1>Hello</h1>
  <p>hi.</p>            
  <div class="row">
    <div class="col-sm-6" style="background-color:yellow;">
      hola
    </div>
    <div class="col-sm-3" style="background-color:pink;">
      adios
    </div>
  </div>
</div>

</body>
</html>

农产品：

那么，我怎么能得到这个呢？（行之间的分离）

Answer 1

只需考虑下面的offset即可。您总共使用了9列网格（6 + 3），因此您可以添加最多3个偏移量，总共有12个。

（我将sm替换为xs以查看缩小代码段中的结果

.row {
 margin-bottom:10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <h1>Hello</h1>
  <p>hi.</p>
  <div class="row">
    <div class="col-xs-6" style="background-color:yellow;">
      hola
    </div>
    <div class="col-xs-3 col-xs-offset-3" style="background-color:pink;">
      adios
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6" style="background-color:yellow;">
      hola
    </div>
    <div class="col-xs-3 col-xs-offset-2" style="background-color:pink;">
      adios
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6" style="background-color:yellow;">
      hola
    </div>
    <div class="col-xs-3 col-xs-offset-1" style="background-color:pink;">
      adios
    </div>
  </div>
</div>

Answer 2

实际上，bootstrap确实有一个＆＃34;天沟空间＆＃34;列之间。您需要的是col-div- *内的元素，以便可以看到这个装订线。您也可以像其他人建议的那样使用偏移量，但您必须考虑您真正想要实现的目标。

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">    </script>
</head>


<body>

<div class="container">
  <h1>Hello</h1>
  <p>hi.</p>            
  <div class="row">
    <div class="col-xs-9" >
      <div style="background-color:yellow; padding: 10px;">hola</div>
    </div>
    <div class="col-xs-3">
      <div style="background-color:pink;">adios</div>
    </div>
  </div>
</div>

</body>
</html>

＆＃13;

Answer 3

我已根据最新的bootstrap v4添加了代码。给出偏移量时语法略有变化。而且断点也发生了变化。 bootstrap v3中的xs等于bootstrap 4中的sm，md等于lg，同样。希望它会有所帮助。

请参阅更多：https://getbootstrap.com/docs/4.0/layout/grid/

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

</head>


<body>

<div class="container">
  <h1>Hello</h1>
  <p>hi.</p>            
  <div class="row">
    <div class="col-sm-6" style="background-color:yellow;">
      hola
    </div>
    <div class="col-sm-3 offset-sm-3" style="background-color:pink;">
      adios
    </div>
  </div>
</div>

</body>
</html>

如何在Bootstrap列布局中的两个div之间添加空格？

3 个答案: