1

Bootstrapを使用して流動的なレスポンシブテンプレートを作成しようとしていますが、ページがヘッダーまたは段落内に大量のテキストで拡張されるたびに、または一般にdiv内の見出しまたは段落に大量のテキストがある場合に表示されます。クラスは流動的な行です....それはdivの外に出て、他のdivを押し下げます。これを修正するにはどうすればよいですか？http://img850.imageshack.us/img850/4238/screenshot20130228at114.png

 ![<div class="container-fluid">
      <div class="div-1">
        <div class="page-header">
          <h1>Page heading <small>Subheading</small>
          </h1>
        </div>
      </div>
      <div class="row-fluid">
        <span class="span3">
          <h1 class="heading">Headingaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
          <p>Lorem Ipsum...aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
        </span>
        <span class="span6">
          <h1 class="heading">Heading</h1>
          <p>Lorem Ipsum...</p>
        </span>
        <span class="span3">
          <h1 class="heading">Heading</h1>
          <p>Lorem Ipsum...</p>
        </span>
      </div>
    </div>
4

2 に答える 2

4

これは簡単な修正です...

次のCSSを追加するだけです。

.row-fluid {
    word-wrap: break-word;  
}

このjsFiddleの例をロードして、実行を押します。結果ボックスを伸ばすだけで、はっきりと表示されます。

折り返しのない長い単語を修正するjsFiddleの例

また、あなたの例では、途切れのない長い単語があることに注意してください。これが、実際に端を越えて実行されている理由です。ほとんどの単語はおそらくそれほど長くは続きません。しかし、「Supercalifragelousexpialidocious」という単語があったとすると、この修正が必要になる可能性があります。:)

于 2013-03-01T05:33:10.170 に答える
0

このcssコードを使用してください。コンテナの境界が終わるところから改行します

.test2
{
 word-break:break-all;
}
于 2013-03-01T05:04:49.500 に答える