Comment garder le curseur Bootstrap confiné à son div?

Question

J'ai essayé d'assembler un site web avec le haut de la page contenant une barre de navigation, un curseur d'image et une citation testimonial (avec toute la section occupant 100% de la hauteur de l'écran. J'ai divisé le conteneur DIV (qui est défini à height: 100vh, width: 100vw;) en div individuels pour chaque section (navbar, curseur, testimonial) mais le curseur ne restera pas dans son div. Je veux m'assurer que le curseur est toujours visible avec le témoignage ci-dessous.Pour une raison quelconque, le curseur est toujours suspendu à l'extérieur de la div (surligné en rouge dans mon JSFiddle), et ne semble pas très réactif (c'est-à-dire qu'il pousse le texte). si quelqu'un pourrait signaler où je vais mal:

https://jsfiddle.net/uy86dxd9/

solutions tentées: J'ai essayé d'installer img { height:50vh; width: auto; } dans l'espoir que cela restera la même taille que sa div, mais cela ne fonctionne pas. J'ai aussi essayé de nettoyer le flotteur car je pensais que cela pourrait s'être effondré, mais pas de chance là-bas.

Des questions, s'il vous plaît demander :) Merci d'avance.

Answer 1

@Roope est correct. La forme rouge que vous aviez était dehors à cause du rembourrage, mais le problème était le conteneur imbriqué.

https://jsfiddle.net/uy86dxd9/2/

Il suffit de retirer vos sous-conteneurs et il suffit d'utiliser les lignes et il va. Il y a encore du padding mais Bootstrap supprime ceci en utilisant des marqueurs négatifs sur les lignes.

<div class="row"> 
    <div class="col-lg-offset-2 col-lg-8"> 
     <div id="myCarousel" class="carousel slide" data-ride="carousel"> 

A partir de la documentation bootstrap (http://getbootstrap.com/css/):

Bootstrap nécessite un élément contenant pour envelopper le contenu du site et notre maison système de grille. Vous pouvez choisir l'un des deux conteneurs à utiliser dans vos projets: . Notez que, en raison du remplissage et plus, ni le conteneur est emboîtable.

Fondamentalement, vous n'avez pas besoin de .container[-fluid] autour de chaque ligne. Le conteneur principal est suffisant. Après cela, utilisez simplement des lignes.