Quelle est la manière correcte de la taille d'une iframe dans un Twitter bootstrap fluide de mise en page?

J'ai un 2-colonne de liquide de Twitter bootstrap mise en page, et que vous voulez un iframe dans un des volets (il contiendra le Google widget tâches -- https://mail.google.com/tasks/ig). Comment puis-je définir la largeur correctement? J'ai compris comment définir le style de sorte qu'il a une frontière (pour le distinguer comme externe le contenu de la page), mais je ne peux pas le faire remplir l'une des colonnes correctement. C'est ce que j'ai actuellement:

      <iframe class="container well well-small"
          style="width: 80%; height: 400px; background-color: #f5e5c5;"
          src="https://mail.google.com/tasks/ig">
      </iframe>

Exemple complet (enregistrer en tant que fichier HTML): http://pastebin.com/1u2QeuZk

OriginalL'auteur gatoatigrado | 2012-11-23

  1. 14

    Utiliser le row-fluid classe pour définir une ligne, et spanX classes de définir des colonnes. Comme:

    <div class="row-fluid">
   <iframe class="container well well-small span6"
           style="height: 400px; background-color: #f5e5c5;"
           src="https://mail.google.com/tasks/ig">
   </iframe>
</div>

    Cependant: Le Xs dans le spanX besoin d'ajouter jusqu'à 12 pour chaque ligne. Ainsi, dans l'exemple ci-dessus vous devez envelopper le contenu de la deuxième colonne dans une balise avec un span6 classe, ou vous pouvez utiliser le offset6 classe sur l'iframe si c'est le seul contenu de la ligne particulière dans le but de faire de l'aligner à droite.

    À avoir une colonne plus large que l'autre, vous pouvez le modifier en changeant X en spanX, assurez-vous qu'ils ajouter jusqu'à 12 pour une ligne.

    Dans le cas où vous vous demandez comment faire pour faire une colonne d'une largeur spécifique: Le point de l'ensemble d'une grille fluide est à pas d'utiliser des largeurs. Vous définissez la largeur du conteneur (de préférence avec des unités relatives ainsi, pour que le contenu de s'adapter à la taille de la fenêtre d'affichage), et chaque colonne sera de 1/12e de la largeur du conteneur. Donc, si vous ne souhaitez contrôler la largeur exactement, alors vous pouvez toujours faire le conteneur de la largeur, de sorte que la colonne que vous souhaitez peut avoir une largeur qui est un multiple de 1/12e du conteneur largeur. I. e. si vous voulez la colonne à 400px de large, vous pouvez faire le conteneur de 800px de large et d'utiliser la classe span6 sur la colonne. Ou utiliser span3 à faire 200px de large etc.

    Je tout est très bien expliqué dans les docs: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

    OriginalL'auteur Joe Dyndale