查看小屏幕的重叠

Question

我正在使用BootStrap网格来设计我的html页面。除了小屏幕，一切都很好。在小屏幕中，视图重叠如下

我正在使用以下代码

＆＃13;

＆＃13;

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/MV5BMTk2NTI1MTU4N15BMl5BanBnXkFtZTcwODg0OTY0Nw@@._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>

＆＃13;

＆＃13;

＆＃13;

我给了＃34; col-xs-6＆＃34;但仍然无法正常工作。 有人可以告诉我我做错了什么。

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

提前致谢

Answer 1

你没有提供任何CSS，这就是我有两个意见的原因。第一个我认为你的图像与col-xs-6重叠，解决方案如下。可能会解决你的问题

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

#poster img { 
    width:100%;
}

否则我认为您已将position:absolute设置为#ratingdiv，如果您将postion设置为#ratingdiv，只需将position:relative更改为media queries < / p>

Answer 2

你错过了一些结束标签。干得好。如果这是您所期望的，请告诉我。

listwidget_2