bootstrap 3将div中的文本内容封装为水平对齐 [英] bootstrap 3 wrap text content within div for horizontal alignment

问题描述

我在这里的讯息标题可能会产生误导。首先看看我目前的HTML：

正如你所看到的，每一列的文本内容溢出到下一列。其次，它们中的每一个不是水平对准的。 （例如查看详细信息的链接不直线对齐）。

这里是我的HTML代码：（这里的内容是动态生成的，所以项目的数量会有所不同） 。我在我的代码中使用bootstrap 3.

 < div class =rowstyle =box-shadow：0 0 30px黑色> 
 
 
< 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出售有110,000英尺功率门，电动窗，有，汽车驱动器优秀，如果你&＃...< /小> 
< / p> 
< p> 
< a class =btn btn-defaulthref =/ search / 1355 / detail /role =button>查看详情& raquo;< / a> 
< button type =buttonclass =btn bookmarkid =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有110,176英里，有电动门，电动窗，太阳屋顶，合金车轮，跑得很好，cd播放器，4缸发动机，...< / small> 
< / p> 
< p> 
< a class =btn btn-defaulthref =/ search / 1356 / detail /role =button>查看详情& raquo;< / a> 
< button type =buttonclass =btn bookmarkid =1356> 
< span class =
 glyphicon glyphicon-star-empty>< / span> 
< / button> 
< / p> 
 
< / div> 
<！ -  / span  - > 
< div class =col-6 col-sm-6 col-lg-4> 
< h3> 2004本田思域LX轿车（worcester www.massmotorcars.com）$ 5900< / h3> 
< p> 
< small> 2004 honda civic lx轿车有134,000英里，看起来很漂亮的汽车，内部和外部看起来不错，有cd播放器，电动窗...< / small> 
< / p> 
< p> 
< a class =btn btn-defaulthref =/ search / 1357 / detail /role =button>查看详情& raquo;< / a> 
< button type =buttonclass =btn bookmarkid =1357> 
< span class =
 glyphicon glyphicon-star-empty>< / span> 
< / button> 
< / p> 
 
< / div> 
< / div> 
  

解决方案

将以下样式添加到 h3 元素：

这会导致其中的长URL包装。单词换行的默认设置是 normal ，它将只包含在一个有限的分割标记集合（例如空格，连字符），它们不存在于URL中。 / p>

My post title here could be misleading. first have a look at HTML i have currently:

As you can see, each column's text content overflows to next column. Secondly, each of them is not horizontal aligned. (eg the link for view details does not align straight). I want them to be aligned straight irrespective of length of text.

Here is my HTML code: (the content here is dynamically generated. so the no of items will vary). I use bootstrap 3 in my 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>

解决方案

Add the following style to your h3 elements:

word-wrap: break-word;

This will cause the long URLs in them to wrap. The default setting for word-wrap is normal, which will wrap only at a limited set of split tokens (e.g. whitespaces, hyphens), which are not present in a URL.

这篇关于bootstrap 3将div中的文本内容封装为水平对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！