不生效？

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