Question

我很难在列之间创建空间。在附加的图像文件中，您可以看到我想在列之间设置一些空格的页面的突出显示部分

此外，我希望相应地设置特色工作区项目的位置，以便它们站在相同的位置。可能应该使用边距/填充？：）

我在bootstrap css文件中查看了.img类并尝试修改它但没有改变。非常感谢任何帮助

代码：

     <body>
      <div class="container">
      <div class="row">
      <div class="col-md-8">
      <img src="http://lorempixel.com/200/150">
      </div>

      <div class="col-md-4">
      <h1>Ulvi Rustamli</h1>
      <p>JavaScript Ninja </p>
      </div>
      </div>


      <div class="row">
      <div class="col-md-12"><img src="http://placehold.it/1150x350"></div>
      </div>

      <div class = "row">
      <div class = "col-md-12"><h2>Featured Work</h2></div>
      </div>
      <div class="row">
      <div class="col-md-4"><img id = "img"  src="https://placeimg.com/250/200/tech">
      <h3 id ="links">My first App</h3>
      </div>
      <div class="col-md-4"><img id = "img" src="https://placeimg.com/250/200/tech">      <h3 id ="links">My first App</h3>
</div>
      <div class="col-md-4"><img id = "img" src="https://placeimg.com/250/200/tech">      <h3 id ="links">My first App</h3>
</div>
      </div>
      <div class="row">
      <div class="col-md-4"></div>
      <div class="col-md-4"><a id="mylink" href="#">Contact</a><a id="mylink" href="About">About me</a><a id="mylink" href="#">FAQ</a></div>
      <div class="col-md-4"></div>
      </div>
      </div>
      </body>

CSS

img {
  vertical-align: middle;
}

.row {
  margin-left: -15px;
  margin-right: -15px;

}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

Answer 1

你可以那样做

<table>
    <tr>
        <td>First Column</td>
        <td></td>
        <td>Second Column</td>
        <td></td>
        <td>Third Column</td>
    </tr>
</table>

并在你的CSS中有类似的东西

table tr td:empty {
    width: 50px;
}

table tr td {
    padding-top: 10px;
    padding-bottom: 10px;
}

在列之间创建空格的简便方法

Answer 2

在列之间创建空间的其他方法是

<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>

CSS

.box {
    padding: 0 5px 0 5px;
}
.box .inner {
    background-color: #fff;
}

很容易

Answer 3

您可以在图像中添加一个类，然后使用，然后使用适当的边距设置。

如果您需要更改列的规则，可以使用帮助程序类：另请参阅article。

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

请参阅整页的工作代码段。

＆＃13;

#mylink {
  margin: 30px 20px;
}
.img-class {
  margin-top: 40px;
  margin-bottom: 30px;
}
/**To Change Column Rules add this class to a row**/

.no-gutter >[class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
  <div class="row">
    <div class="col-md-8">
      <img src="http://lorempixel.com/200/150" class="img-responsive" />
    </div>
    <div class="col-md-4">
      <h1>Ulvi Rustamli</h1>

      <p>JavaScript Ninja</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <img src="http://placehold.it/1150x350" class="img-responsive img-class" />
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <h2>Featured Work</h2>

    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <img id="img" src="https://placeimg.com/250/200/tech" class="img-responsive" />
      <h3 id="links">My first App</h3>

    </div>
    <div class="col-md-4">
      <img id="img" src="https://placeimg.com/250/200/tech" class="img-responsive" />
      <h3 id="links">My first App</h3>

    </div>
    <div class="col-md-4">
      <img id="img" src="https://placeimg.com/250/200/tech" class="img-responsive" />
      <h3 id="links">My first App</h3>

    </div>
  </div>
  <div class="row text-center">
    <div class="col-md-12"> <a id="mylink" href="#">Contact</a>
      <a id="mylink" href="About">About me</a>
      <a id="mylink" href="#">FAQ</a>

    </div>
  </div>
</div>
<hr>
<div class="container">
  <h2>Default</h2>

  <div class="row">
    <div class="col-md-4">
      <div class="alert alert-info">Default</div>
    </div>
    <div class="col-md-4">
      <div class="alert alert-info">Default</div>
    </div>
    <div class="col-md-4">
      <div class="alert alert-info">Default</div>
    </div>
  </div>
  <hr>
  <h2>Padding Removed</h2>

  <div class="row no-gutter">
    <div class="col-md-4">
      <div class="alert alert-danger">No Padding</div>
    </div>
    <div class="col-md-4">
      <div class="alert alert-danger">No Padding</div>
    </div>
    <div class="col-md-4">
      <div class="alert alert-danger">No Padding</div>
    </div>
  </div>
</div>

＆＃13;

我无法在css / html

3 个答案: