2013-10-16 18 views
0

我與引導很新的且當問題都有所涉獵:上方的文本圖像引導

這裏是我的網頁的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/[email protected]_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列的行,所以我不明白他們如何進入對方。

+6

給圖像一類'img-responsive'。我認爲這只是圖像太寬。 – Albzi

+0

@BeatAlex Ahh我看到了 - 非常感謝您解決了這個問題! –

+0

不用擔心! :)我會讓它成爲答案。 – Albzi

回答

3

給圖像一個img-responsive的分類。這只是一個圖像太寬的例子。