Question

这是小提琴：https://jsfiddle.net/x1aevoy9/

问题在于，随着屏幕变窄，<h3>元素中的单词会在最终跳到图像下方之前在它们之间产生很大的间隙。我想防止这些差距的发生，换句话说，保持一致，没有大的差距。当第二个单词或一组单词比第一个单词长时，似乎就会发生这种情况。我玩过填充物，但我无法弄明白。

Answer 1

试试这个。

h3 { display: table }

Answer 2

将以下样式添加到<h3>代码。

h3{
      -ms-word-break: break-all;
      word-break: break-all;

      /* Non standard for WebKit */
      word-break: break-word;

      -webkit-hyphens: auto;
      -moz-hyphens: auto;
      hyphens: auto;
}

参考：https://css-tricks.com/almanac/properties/w/word-break/

小提琴：https://jsfiddle.net/g4ar6s9r/

Answer 3

您可以将两个顶部元素包装在div中（b和.pull-right）

https://jsfiddle.net/x1aevoy9/4/

<div>
  <b style="color:goldenrod; padding-right:5px;">Gold Member</b>
  <div class="pull-right" style="padding-top:5px; padding-bottom:5px;">
    <a href="/listings/ListingID"><img alt="Chief Bean Counter" width="160" height="120" src="listing.PhotoURL" /></a>
  </div>
</div>

Answer 4

如何使用bootstrap列重新组织代码。

<div class="row" style="padding: 10px;">
  <div class="col-sm-4">
    <b style="color:goldenrod; padding-right:5px;">Gold Member</b>
    <h3><a href="/listings/@listing.ListingID">Chief Bean Counter</a></h3>
    <p><em>This is a subtitle</em></p>
  </div>
  <div class="col-sm-3 col-sm-offset-5 text-right col-xs-3">
    <a href="/listings/ListingID"><img alt="Chief Bean Counter" width="160" height="120" src="listing.PhotoURL" /></a>
  </div>
</div>

它以与当前代码相比更宽的宽度捕捉到第二行，但根本不会干扰文本。

Bootstrap - 拉动右侧元素，当屏幕变窄时，在左侧的标题中创建间隙

4 个答案: