无法在带有文字的缩略图上获得边框

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 for caption-blue

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

Answer 1

只需使用CSS！

您可以在外部CSS文件中执行此操作，也可以在div中使用direkt

.thumbnail {
    border: solid 1px black;
}

Fiddle

或纯HTML：

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

Fiddle