Wie overlay-Bootstrap?

Ich benutze bootstrap, und ich habe eine Anker-Tags text ein, den ich will overlay in einer Ecke von einem anderen text-Bereich. Problem ist, dass die bootstrap-Spalte ist Platz verschwenden. Unten ist das, was id ist nun dabei, mit den highlights des divs, und unten, dass ist wie ich wie der text zu fließen:

Aktuellen

<div id="mainWrapper" class="wrapper">
    <div class="content-main">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xxs-12 col-xs-10">
                    <p>Chuck Norris challenged Spain to a football match and won Chuck Norris can win a game of Connect Four in only three moves. Chuck Norris does not sleep. He waits. The Great Wall of China was originally created to keep Chuck Norris out. It failed miserably, Chuck Norris is the reason why Waldo is hiding, Chuck Norris drives an ice cream truck covered in human skulls. When Chuck Norris went to Vegas, Sinatra sang "Your Way.", Remember the Soviet Union? They decided to quit after watching a DeltaForce marathon on Satellite TV Chuck Norris counted to infinity - twice. </p>
                </div>
                <div class="col-xxs-12 col-xs-2 semi-transparent">
                    <a html="www.google.com">Spanish</a>
                </div>
            </div>
        </div>
    </div>
</div>

Gewünschte Option 1 (Gewickelt)

Gewünschten Option 2 (Oben schwimmt)

Was ist der beste Weg, dies zu tun?

Nach dem code, von dem, was Sie versucht haben, bitte.
Ich werde Entsendung, was ich habe, aber diese Seite ist ganz neu, also ich bin offen für alles. Nur brauchen einen effizienten Weg, um den übergang zwischen spanischen und englischen Versionen der Vertrieb Telefon-Agent script.

InformationsquelleAutor Daryl | 2017-01-04

Bootstrap hat eine Klasse bedeutete für den schließen-button, passiert auf die top-Seite, wie Sie wollte. Es könnte nützlich sein. Verwenden Sie es wie diese:

<div class="col-xxs-12 col-xs-10">
    <div class="close">
        <a html="www.google.com">Spanish</a>
    </div>
    <p>Chuck Norris challenged Spain to a football match and won Chuck Norris can win a game of Connect Four in only three moves. Chuck Norris does not sleep. He waits. The Great Wall of China was originally created to keep Chuck Norris out. It failed miserably, Chuck Norris is the reason why Waldo is hiding, Chuck Norris drives an ice cream truck covered in human skulls. When Chuck Norris went to Vegas, Sinatra sang "Your Way.", Remember the Soviet Union? They decided to quit after watching a DeltaForce marathon on Satellite TV Chuck Norris counted to infinity - twice. </p>
</div>

Sie können sich wahrscheinlich fügen Sie eine weitere Klasse, um es, um es zu überschreiben.

Option 1 es geht!!!
Froh, dass es geholfen hat. Es scheint, wrap-around-text richtig, aber wenn Sie wollen, dass es zu überschneidungen ein Bild (z.B. innerhalb einer Karte), solltest du etwas möchtest, wie Paul seine Antwort.

InformationsquelleAutor Brian

Gewünschten Option 2

Einfach den div, in dem Sie wollen, dass die anderen div platziert werden, um position:relative; und dann wird das overlay-div mit position:absolute; und top, right usw. wenn Sie es brauchen.

CSS:

.main {
  position:relative;
  height:150px;
  background:#333;
}

.overlay {
  position:absolute;
  top:0;
  right:0;
  height:25px;
  width:25px;
  background:green;
}

HTML:

<div class="main">
  <div class="overlay"></div>
</div>

InformationsquelleAutor Smort

Bitte Lesen Sie meine codepen:
Beispiel

<html>
  <body>
<div class='container'>

<div class="row">
  <div class="col-md-10" style='background:red'>
    asfdsafsasadsfa<br>
    asfdsafsasadsfa<br>
    asfdsafsasadsfa<br>
    asfdsafsasadsfa<br>
  </div>
  <div class="col-md-2" style='background:yellow'>SPANISH</div>
</div>


<div class="row">
  <div class="col-md-12" style='background:blue'>
    asfdsafsasadsfa<br>
    asfdsafsasadsfa<br>
    asfdsafsasadsfa<br>
    asfdsafsasadsfa<br>
  </div>
  <div class="col-md-1 col-md-push-9" style='background:green;position:absolute;'>SPANISH</div>
</div>

  </div>
</div>
  </body>
</html>

Bitte auch das folgende sehen:

InformationsquelleAutor Kyle Pastor

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.