html - CSS 和 html : adding margins result in elements not being in a row

Question

我有一些 html 代码，在行中有一些元素:

<div class = "row">
<div class="col-sm-3 cont-box">
<h1>Title1<h1>
</div>
<div class="col-sm9 cont-box">  
<img src="onepic.jpeg" class="img-responsive" alt="dum1">
</div>
</div>

当我向类 cont-box 添加边距时，我的浏览器将两个元素显示在彼此下方，并添加了一个换行符。我希望它们彼此相邻，我错过了什么？

我对 CSS 和 html 完全陌生，所以非常感谢任何帮助。

Answer 1

当您向 bootstrap 网格添加边距时，当其宽度超过 12 列网格时，它会自动向下推。

要做到这一点，请在 col-sm-3 和 col-sm-9 中添加 div 并为其添加边距。

 <div class = "row">
    <div class="col-sm-3">
      <div class="cont-box">
      <h1>Title1<h1>
     </div>
    </div>
    <div class="col-sm-9">  
     <div class="cont-box">
      <img src="onepic.jpeg" class="img-responsive" alt="dum1">
    </div>
   </div>
</div>