Ich versuche, das folgende mit Bootstrap 3 zu duplizieren. Wenn es keine graue Box von links über die 4 Preisfelder (Spalten) gäbe, würde es nicht Es ist ein Problem, aber ich weiß, dass ich stundenlang damit herumspielen könnte, bevor ich herausfand, dass ich es falsch gemacht habe. Irgendwelche Vorschläge, wo ich anfangen soll?Bootstrap 3 - Ich möchte eine Reihe über Spalten hinweg überlappen (mit Transparenz)
Soll ich mit 5 Spalten mit einer eingestellten Höhe beginnen und dann den Text in Spalte 1 mache eine Breite von 100%? Hmmm
EDIT: Hier ist die JsFiddle, die ich bisher habe. Bitte denken Sie daran, dass ich ein Entwickler und ein schlechter Designer bin (es sei denn, es ist etwas Einfaches). Ich kann es nicht einmal ertragen, die Farben zu betrachten, die ich für die Probe gewählt habe, also sei nicht zu streng.
jsFiddle First Pitiful Attempt
<div class="container">
<div class="row">
<div class="col-xs-4 price-descr">
</div>
<div class="col-xs-4 price-descr">
<div class="row descr-spacer"> </div>
<div class="row">Script listings or script renewals</div>
</div>
<div class="col-xs-1 text-nowrap img-rounded price-box first">
<div class="row priceText">1st
<br />Script</div>
<div class="row price-spacer"> </div>
<div class="row pricePrice">$60</div>
</div>
<div class="col-xs-1 img-rounded price-box second">
<div class="row priceText">2nd<br />Script</div>
<div class="row price-spacer"> </div>
<div class="row pricePrice">$50</div>
</div>
<div class="col-xs-1 img-rounded price-box third">
<div class="row priceText">3rd<br />Script</div>
<div class="row price-spacer"> </div>
<div class="row pricePrice">$40</div>
</div>
<div class="col-xs-1 img-rounded price-box fourth">
<div class="row priceText">4th<br />Script</div>
<div class="row price-spacer"> </div>
<div class="row pricePrice">$40</div>
</div>
</div>
</div>
könnten Sie bitte den Code in jsbin einfügen und uns zeigen, wie weit man es funktionieren gemacht haben? –
es ist eigentlich kein Problem machen 6 Spalten Größe "2" und machen Sie Ihre Skripte in, danach machen Sie eine weitere 12 Spalte Div mit absoluter Position und ziehen Sie es nach unten, indem Sie CSS-Eigenschaften. –