Bootstrap-responsive design Divs überlappen

Ich bin ein Neuling auf responsive Elemente in bootstrap. Diese zwei divs, deren HTML-Code ist unten angegeben, in mywebapp ( Ex: http://greenboard.in/noticeDescription.html?noticeId=60 ) überschneiden sich mit jeder anderen in der mobilen Bildschirmen. Ändern der Größe des browser-Fensters, um das Verhalten. Wie soll ich mich überwinden, das Verhalten?

 <!-- DIV1 -->
 <div class = "col-md-12 col-sm-12">
      <a href= "/" id="logo-dark"> <img class="img-responsive" width="60" height="60" alt="" src="images/logo-dark-sm.png"> </a>
 </div>

<!-- DIV2 -->

 <div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2" style="margin-top: 25px;">
     <div id="DescriptionWrapper"></div>
 </div>
Wollen Sie die zweite div zu erscheinen, um das Recht des ersten?

InformationsquelleAutor Shashank | 2014-05-26

  1. 3

    Css Ihres Logos ist:

    #logo-dark, #logo-light {
top: 0;
left: 0;
position: absolute;

    Dies bedeutet, Ihr logo wird wohl immer in der oberen linken position, unabhängig von der Elemente um ihn herum, das ist, warum Sie Ihre nächste element überlappt das logo.

    Gibt es zwei Möglichkeiten, wie Sie dieses Problem lösen:

    1) Ersetzen Sie die position:absolute; mit position:relative; für kleinere viewports mithilfe von media queries.

    2)

      a) Hinzufügen <div style="clear:both;"></div> zwischen den divs

      b) Lassen mehr Raum-Marge im zweiten div margin-top: 35px;

    InformationsquelleAutor AyB

  2. 0

    Diese kann getan werden, mit einfachen bootstrap. In diesem Fall divs niemals überschneiden

      <div class="container">
  <div class="panel panel-default">
      <div class="panel-body">


      </div>
  </div>

  <div class="panel panel-default">
      <div class="panel-body">


      </div>
  </div>

    InformationsquelleAutor Crying Freeman

Schreibe einen Kommentar