image div getting displaced while resizing the browser
Question
I have a bootstrap page, Which is completely resposnive .
But for some reason, when I resize the browser, one of the div's images are getting displaced.
My code structure is like
<body>
<div class="header-wrapper">
-----
</div>
<div class="content-wrapper">
----
</div>
<div class="content-wrapper">
----
</div>
</body>
Is there anything standard which should've been there which I am missing regarding these displacements or it is something with my written code?
Please suggest
2 answers
solution1
0 2015-09-07 12:38:14
Add "img-responsive" class to the image tag
<img src="..." class="img-responsive" alt="Responsive image">
solution2
0 2015-09-07 12:39:52
Some of the elements in bootstrap don't work out within your layout if you're not wrapping the entire html content inside of your body tag with a div.container or div.container-fluid. It doesn't appear like you did that from your shared code. See below:
<body>
<div class="container"> <!--To wrap the doc, or conatiner-fluid for a wider container. -->
<div class="header-wrapper">
-----
</div>
<div class="content-wrapper">
----
</div>
<div class="content-wrapper">
----
</div>
</div> <!--add @ end of doc -->
</body>
Above, would be my very first suggestion if you have not yet wrapped your document with a container.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.