web-dev-qa-db-fra.com

Divs flottants dans la disposition Bootstrap

Je dois faire quelque chose comme ça en utilisant Boostrap. Contenu "fluide" sur la page avec deux widgets à l'intérieur - le premier en haut à droite et le second en bas à gauche.

enter image description here

Widget1 est facile - j'avais juste besoin de class = "pull-right". Mais que faire de la seconde pour l'avoir au bas de la page en gardant le "contenu" flottant?

style="bottom:0;"ne fonctionne pas: avoir ce code

<div class="container-fluid">
  <div class="row-fluid">
    <div class="offset1 span8 pull-right">
    ... Widget 1...
    </div>

    <div class="offset1 span8 pull-left" style="bottom:0;">
    ... Widget 2...
    </div>

    .... a lot of content ....

  </div>

</div><!--/.fluid-container-->

J'ai ceci comme résultat:

enter image description here

Déplacer le widget 2 vers le bas n'aide pas non plus:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="offset1 span8 pull-right">
      ... Widget 1...
    </div>
      .... a lot of content ....
   <div class="span8 pull-left" style="bottom:0;margin-left: 0;">
      ... Widget 2...
   </div>
  </div>
</div><!--/.fluid-container-->

enter image description here

Des idées sur la façon de le faire sans hacks sales (par exemple, je pourrais utiliser JavaScript pour corriger la position de Widget2)?

Ou (ok, ok) avec eux?

htmlcsstwitter-bootstrapcss-float
15
kostik

D'après tout ce que j'ai lu, vous ne pouvez pas faire exactement ce que vous voulez sans Javascript. Si vous flottez à gauche avant le texte

<div style="float:left;">widget</div> here is some CONTENT, etc.

Votre contenu se termine comme prévu. Mais votre widget est en haut à gauche. Si vous placez plutôt le flotteur après le contenu

here is some CONTENT, etc. <div style="float:left;">widget</div>

Ensuite, votre contenu encapsulera la dernière ligne à droite du widget si la dernière ligne de contenu peut tenir à droite du widget, sinon aucun habillage n'est effectué. Pour que les bordures et les arrière-plans incluent réellement la zone flottante dans l'exemple précédent, la plupart des gens ajoutent:

here is some CONTENT, etc. <div style="float:left;">widget</div><div style="clear:both;"></div>

Dans votre question, vous utilisez bootstrap qui ajoute simplement row-fluid::after { content: ""} qui résout le problème de bordure/arrière-plan.

Déplacer votre contenu vers le haut vous donnera le retour à la ligne: http://jsfiddle.net/jJNPY/34/

  <div class="container-fluid">
  <div class="row-fluid">
    <div class="offset1 span8 pull-right">
    ... Widget 1...
    </div>
    .... a lot of content ....
    <div class="span8" style="margin-left: 0;">
    ... Widget 2...
    </div>


  </div>

</div><!--/.fluid-container-->
6
Daniel Moses

Je comprends que vous voulez que le Widget2 partage la bordure inférieure avec la div du contenu. Essayez d'ajouter

style="position: relative; bottom: 0px"

à votre balise Widget2. Essayez aussi:

style="position: absolute; bottom: 0px"

si vous voulez accrocher votre widget au bas de l'écran.

Je suis un peu rouillé avec CSS, peut-être que le style correct est "margin-bottom: 0px" au lieu de "bottom: 0px", essayez-le. De plus, la classe pull-right semble ajouter un style "float = right" à l'élément, et je ne sais pas comment cela se comporte avec "position: relative" et "position: absolue", je le supprimerais.

1
rodix