无法在带有文本的缩略图上获取边框

Question

如何在下面的缩略图上获得一个漂亮的边框？我尝试使用容器，但这意味着当在md或sm屏幕宽度中使用时，文本会偏离侧面。

<div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0">
    <div class="caption-blue thumbnail">
        <div>
            <p>How can i get a border here, i would really like tht but everytime i try the text either runs off the side with a container or no border sows at all ... help!</p>
        </div>
    </div>
</div>

字幕蓝色的Css

   .caption-blue{
        background: rgb(1,165,228);
        font-family: 'myfont';
        color: white;
    }

Answer 1

只需使用CSS！

您可以在div 中的外部CSS文件或目录中执行此操作

.thumbnail {
    border: solid 1px black;
}

Fiddle

或者纯HTML:

<div class="caption-blue thumbnail" style="border: solid 1px black;">

Fiddle