web-dev-qa-db-fra.com

bootstrap 3 encapsule le contenu du texte dans div pour l’alignement horizontal

Le titre de mon post ici pourrait être trompeur. D'abord, regardez HTML, j'ai actuellement: enter image description here

Comme vous pouvez le constater, le contenu textuel de chaque colonne déborde sur la colonne suivante. Deuxièmement, chacun d'eux n'est pas aligné horizontalement. (par exemple, le lien pour view details ne s'aligne pas droit). Je veux qu'ils soient alignés indépendamment de la longueur du texte.

Voici mon code HTML: (le contenu ici est généré dynamiquement. Le nombre d'éléments varie donc). J'utilise bootstrap 3 dans mon code.

<div class="row" style="box-shadow: 0 0 30px black;">


      <div class="col-6 col-sm-6 col-lg-4">
        <h3>2005 Volkswagen Jetta 2.5 Sedan (worcester   http://www.massmotorcars.com) $6900</h3>
        <p>
          <small>2005 volkswagen jetta 2.5 for sale has 110,000 miles powere doors,power windows,has ,car drives excellent ,comes with warranty if you&#39;re ...</small>
        </p>
        <p>
          <a class="btn btn-default" href="/search/1355/detail/" role="button">View details &raquo;</a>
          <button type="button" class="btn bookmark" id="1355" >
            <span class="
                  glyphicon glyphicon-star-empty "></span>
          </button>
        </p>

      </div>
      <!--/span-->
      <div class="col-6 col-sm-6 col-lg-4">
        <h3>2006 Honda Civic EX Sedan (Worcester www.massmotorcars.com) $7950</h3>
        <p>
          <small>2006 honda civic ex has 110,176 miles, has power doors ,power windows,Sun roof,alloy wheels,runs great, cd player, 4 cylinder engen, ...</small>
        </p>
        <p>
          <a class="btn btn-default" href="/search/1356/detail/" role="button">View details &raquo;</a>
          <button type="button" class="btn bookmark" id="1356" >
            <span class="
                  glyphicon glyphicon-star-empty "></span>
          </button>
        </p>

      </div>
      <!--/span-->
      <div class="col-6 col-sm-6 col-lg-4">
        <h3>2004 Honda Civic LX Sedan  (worcester www.massmotorcars.com) $5900</h3>
        <p>
          <small>2004 honda civic lx sedan has 134,000 miles, great looking car, interior and exterior looks Nice,has cd player, power windows ...</small>
        </p>
        <p>
          <a class="btn btn-default" href="/search/1357/detail/" role="button">View details &raquo;</a>
          <button type="button" class="btn bookmark" id="1357" >
            <span class="
                  glyphicon glyphicon-star-empty "></span>
          </button>
        </p>

      </div>
</div>
htmlcsstwitter-bootstrapdjango-templatestwitter-bootstrap-3
34
eagertoLearn

Ajoutez le style suivant à votre h3 éléments:

Word-wrap: break-Word;

Cela entraînera le retour à la ligne des URL longues. Le paramètre par défaut pour Word-wrap est normal, qui ne sera utilisé que pour un ensemble limité de jetons divisés (par exemple, des espaces, des traits d'union) qui ne figurent pas dans une URL.

69
kpentchev

Maintenant, Update Word-wrap est remplacé par:

overflow-wrap:break-Word;

Compatible vieux navigateur et css 3 c'est une bonne alternative!

c'est l'évolution de Word-wrap (depuis 2012 ...)

Voir plus d'informations: https://www.w3.org/TR/css-text-3/#overflow-wrap

Voir compatibilité complète: http://caniuse.com/#search=overflow-wrap

20
Css lover