不生效？

Question

这是我的代码：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="row"> 
 

 
    <div style={{border: 'solid black 0.5px'}} class="col-md-3"> 
 
    <h2>Heading 1</h2> 
 
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus,</p> 
 
    <p><a className="btn btn-secondary" href="#" role="button">View details &raquo;</a></p> 
 
    </div> 
 

 
    <div style={{border: 'solid black 0.5px'}} class="col-md-3 offset-md-4"> 
 
    <h2>Heading 2</h2> 
 
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, </p> 
 
    <p><a className="btn btn-secondary" href="#" role="button">View details &raquo;</a></p> 
 
    </div> 
 

 
    <div style={{border: 'solid black 0.5px'}} class="col-md-3 offset-md-1"> 
 
    <h2>Heading 2</h2> 
 
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, </p> 
 
    <p><a className="btn btn-secondary" href="#" role="button">View details &raquo;</a></p> 
 
    </div> 
 

 
</div>

我用的标题2，一个在中心偏移，但它不会跳过一些空间，不像在文档？我想要做的是在它们上添加一些边距，但是当我尝试时，它会将底部的最后一个压入底部，或者如果我不使用4，它不占用所有空间。我如何在这里添加保证金？

Answer 1

这col-md-offset-4，而不是offset-md-4 再次读更好的文档https://getbootstrap.com/docs/3.3/css/#grid-offsetting