查看重叠的小屏幕

问题描述：

我正在使用BootStrap网格来设计我的html页面。除了小屏幕，一切都很好。在小屏幕上的看法是重叠像下面查看重叠的小屏幕

我使用下面的代码

div class="container" > 
 
    <div class="row"> 
 
     <div class=" col-xs-6 col-sm-offset-1 
 
    col-sm-4 col-md-offset-2 col-md-3"> 
 
      <div id="poster"> 
 
       <img src="http://ia.media-imdb.com/images/M/[email protected]@._V1_SX300.jpg"> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-sm-offset-1 col-sm-4 col-xs-6 col-md-2" > 
 
      <div id="ratingdiv"> 
 
       <label>Your Rating</label> 
 
       <div id="rateYo"></div> 
 

 
       <div class="editbtn"> 
 

 
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Edit</button> 
 
       </div> 
 
       <div class="deletebtn"> 
 
        <button>Delete</button> 
 

 
       </div> 
 

 

 
      </div> 
 
     </div> 
 

 
    </div> 
 

 
</div>

我给 “COL-XS-6”，但仍然是其不加工。有人能告诉我我做错了什么。

真的很感谢任何想法或建议。

在此先感谢

是你，包括meta标签？ –

你可以包含所有的源代码而不是html吗？ –

你也可以提供你的css –

答

你错过了一些关闭标签。干得好。让我知道如果这是你所期望的。

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Example</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-6 col-sm-8 col-md-6 col-lg-4"> 
 
      <img src="http://ia.media-imdb.com/images/M/[email protected]@._V1_SX300.jpg" class="img-responsive"> 
 
     </div> 
 
     <div class="col-xs-6 col-sm-4 col-md-2 col-lg-2"> 
 
     <div id="ratingdiv"> 
 
      <div class="row"> 
 
      <label>Your Rating</label> 
 
      <div id="rateYo"></div> 
 
      </div> 
 
      <div class="row"> 
 
       <button type="button" class="btn btn-info btn-md">Edit</button> 
 
       <button type="button" class="btn btn-danger btn-md">Delete</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div> 
 
</body> 
 
</html>

非常感谢。是的，我错过了结束标签。 – dharan

答

你没有提供任何的CSS，这就是为什么我有两个观点。第一个我认为你的图像重叠col-xs-6和解决方案如下。可能是这将解决您的问题

#poster { 
    width:100%; 
    float:left; 
} 

#poster img { 
    width:100%; 
}

否则我认为你必须设置position:absolute到#ratingdiv，如果你设置postion到#ratingdiv只是改变position:relative到media queries

感谢您的时间。我错过了结束标签。现在已经修复了。 – dharan

查看重叠的小屏幕

相关推荐