Twitter Bootstrap: Image-Positionierung

Ich bin customizing meine website mit Twitter Bootstrap. Ich bin versucht, ein Bild einzufügen positioniert als die Obere Schicht, liegt etwas "außerhalb des Containers", und kann dementsprechend die Größe während des Aufenthaltes proportional /im Verhältnis zu den anderen Elementen. Ich würde gerne mit position: relative, aber das Bild scheint gezwungen, in einer box innerhalb des Containers. Wenn ich mit position: absolute, das Bild korrekt angezeigt, zuerst auf meine web-browser, aber es verhält sich nicht wie vorgesehen, wenn die Bildschirmgröße geändert wird.

Kann mir jemand helfen, herauszufinden, eine gute Lösung für dieses Problem?

HTML: ich habe nicht das Bild darin das eigene , aber noch befindet sich innerhalb der insgesamt . Hier ist der code:

<img src="images/hero-babee.png" alt="Babee blowing bubbles." id="babee-bubbles">

CSS: Hier ist meine custom-css.

img#babee-bubbles {
z-index: 100;
position: relative;
top: 51%;
left: 7.5%;
}

Ich würde schätzen jede Hilfe bei der Suche nach einer Lösung helfen und/oder mit meinem code /syntax. Vielen Dank im Voraus.

InformationsquelleAutor user2281547 | 2013-04-15

  1. 1

    Design responsive website mit bootstrap können Sie die Verwendung von bootstrap layout.
    Fluid-layout-Klasse "row-fluid" und Sie können geben Sie die Breite in der Verwendung der Klasse als span.
    diese Struktur reagiert. es testen nur die Größe Ihrer browser-Fenster.

    <div class="row-fluid">
  <div class="span2">
      <img>....</img>
        ......
   </div>
  <div class="span2">
  </div>
   ......

</div>

    Bootstrap-devide Bildschirmgröße in 12 Teil. wir können diesen Teil, indem 

    class="span*"

    * ist nicht der Teil.

    Dies hat nicht meine Probleme lösen. Wenn ich eingeschaltet, um eine fluid-system, es hat überhaupt nicht angezeigt. Ich will auch halten die festen container-layout: twitter.github.io/bootstrap/examples/hero.html

    InformationsquelleAutor Dipak Telangre

Schreibe einen Kommentar