我能'；t在css/html中创建列之间的空间_Html_Css_Twitter Bootstrap

我能'；t在css/html中创建列之间的空间

html css twitter-bootstrap

我能'；t在css/html中创建列之间的空间,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我很难在列之间创建空间。在附加的图像文件中，您可以看到页面的突出显示部分，我希望在其中设置一些列之间的间距此外，我还想将特色工作区项目的位置设置为相互对应，以便它们位于相同的位置。可能应该用边距/填充物来完成？：）我查看了引导css文件中的.img类，并尝试对其进行修改，但没有任何更改。非常感谢您的帮助代码： <body> <div class="container"> <div class="row">

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

此外，我还想将特色工作区项目的位置设置为相互对应，以便它们位于相同的位置。可能应该用边距/填充物来完成？：）

我查看了引导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>

你能做到的

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

在列之间留出空间的简单方法

在列之间留出空间的另一种方法是

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

这也很简单

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

如果需要更改列的规则，可以使用帮助器类：另请参见

请参阅整页的工作代码段

#mylink{
利润率：30px 20px；
}
.img类{
边缘顶端：40px；
边缘底部：30px；
}
/**若要更改列规则，请将此类添加到行中**/
.no排水沟>[class*='col-']{
右边填充：0；
左侧填充：0；
}



鲁斯塔姆利尺骨
JavaScript忍者
特色作品
我的第一个应用程序
我的第一个应用程序
我的第一个应用程序

违约
违约
违约
违约

去除填料
没有填充物
没有填充物
没有填充物

请提供可复制的小CSS/HTML，而不是图片。我应该添加整个CSS文件吗？您正在使用的一些HTML的简化版本和影响此问题的CSS将非常好，可能是JSFIDLE或其他格式。再添加一个俯冲和class=“row”然后在该dive中添加这些图像它们已经在其中了还是应该在每个div中创建新div？不明白，从来没有，从来没有使用过表格来布局。这太棒了！但是现在当我修改我的引导文件时，它没有显示更改。我做错了什么？您必须将HTML:和/或class=“img responsive img class”中的类添加到img标记中，如果您查看示例，您将看到所有内容。效果非常好！谢谢

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

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

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

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

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