Question

我对Bootstrap很新，偶然发现了一个问题：

这是我的页面的HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Watch The Shawshank Redemption</title>
    <link href="/Content/bootstrap/bootstrap.css" rel="stylesheet" />
    <link href="/Content/Site.css" rel="stylesheet" />
    <link href="//vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-8 col-md-offset-2">
                <div class="row">
                    <div class="col-lg-3 col-md-3 col-sm-3">
                        <img class="img-rounded img-border" src="http://ia.media-imdb.com/images/M/MV5BODU4MjU4NjIwNl5BMl5BanBnXkFtZTgwMDU2MjEyMDE@._V1_SX214_.jpg" />
                    </div>
                    <div class="col-lg-9 col-md-9 col-sm-9">
                        <h2 class="pagination-centered">The Shawshank Redemption</h2>
                        <p>Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.</p>
                        <div class="row">
                            <div class="col-lg-4 col-md-4 col-sm-4"><i class="glyphicon glyphicon-time"></i>142 minutes</div>
                            <div class="col-lg-4 col-md-4 col-sm-4">Release year: 1994</div>
                            <div class="col-lg-4 col-md-4 col-sm-4">Category: Crime</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/Scripts/jquery-2.0.3.js"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="//vjs.zencdn.net/4.1/video.js"></script>
    <script src="/Scripts/initializers/initializer.js"></script>

</body>
</html>

但由于某种原因，文字部分放在图像上，如下图所示：

enter image description here

为什么文字放在图片上？我以为我给了图像3列和文本的9列，所以我看不出它们是如何相互接触的。

Answer 1

为图像提供一类img-responsive。这只是图像太宽的情况。

文本被放置在Bootstrap中的图像上

1 个答案: