html - 如何在 col-md-4 之间添加一些空格？

Question

在我的学校元素中。我正在尝试创建一个类似 View 的照片库，但我需要在两张照片之间留出一些空间，代码在这里

<div class="container">
    <h2 style="text-align: center;">Physics</h2>
    <br>
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-2" style="background-color: aliceblue;">
            <img class="img-responsive" class="thumbnail" class="img-center center-block" src="assets/GirishJain2.JPG" alt="Girish Jain">
            <p style="text-align:justify;">
                <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Girish Jain</b> <br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b.Tech,IIT-Delhi<br></br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Exp 14 years
            </p>
        </div>
        <div class="col-sm-6"></div>
        <div class="col-md-2" style="background-color: lavender;">
            <img class="img-responsive" src="assets/prateek.JPG" alt="Prateek Jain">
            <p style="text-align:justify;">
                <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Prateek Jain</b> <br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b.Tech-MNIT,Jaipu<br></br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Exp 7 years
            </p>
        </div>
        <div class="col-md-2" style="background-color: aliceblue;">
            <img class="img-responsive" class="thumbnail" class="img-center center-block" src="assets/sidharthjain.JPG" alt="Siddharth Jain">
            <p style="text-align:justify;">
                <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sidharth Jain</b> <br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b.Tech-MNIT,Jaipur<br></br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Exp 14 years
            </p>
        </div>
    </div>
</div>

和类似 的页面在物理部分下方，我希望每张照片之间有一些空间

Answer 1

允许 col-md-4 继续发挥其当前作用。您希望图像位于 div 中，而 div 的工作就是留出空间。

HTML

<div class="col-md-4 col-xs-4 col-sm-4">
  <div class="image-padding">
    <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Iame"/>
  </div>
</div>

CSS

.image-padding {
  padding: 5px;
}
.image-padding img {
  width: 100%;
}

代码笔

http://codepen.io/Goosecode/pen/oxaEjR