35

これはとても単純なことのように思えるので、申し訳ありません。

次の要素が改行にあるように改行を挿入する正しい方法は何ですか? これを自動的に行うもの ( <p>` 内など) があるようですが、次の要素が最後の要素のすぐ隣に表示されるという動作が見られます。

HTML:

<ul class="nav nav-tabs span2">
    <li><a href="./index.html"><i class="icon-black icon-music"></i></a></li>
    <li><a href="./about.html"><i class="icon-black icon-eye-open"></i></a></li>
    <li><a href="./team.html"><i class="icon-black icon-user"></i></a></li>
    <li><a href="./contact.html"><i class="icon-black icon-envelope"></i></a></li>
</ul>
<BR /> <!-- It seems dumb to need this!  Is this really how -->
<BR /> <!-- to get a newline? -->
<BR /> <!-- Well, it's what -->
<BR /> <!-- I'm doing now, I suppose... -->
<BR />

<div class="well span6">
    <h3>I wish this appeared on the next line without having to gratuitously use BR!</h3>
</div>

ulまたはのようなものの後に改行を処理する正しいまたはエレガントな方法は何divですか? これを処理するコードの一般的なセットアップを見落としていますか?

4

6 に答える 6

54

とを使用span6していspan2ます。これらのクラスはどちらも " float:left" であり、可能であれば、常に隣同士に座ろうとします。Twitter ブートストラップは 12 グリッド システムに基づいています。したがって、通常は常にspan**#**を足して 12 にする必要があります。

例: span4+ span4+span4またはspan6+span6またはspan4+ span3+ span5.

ただし、スパンを強制的に下げるには、前のフロートをリッスンせずに、twitter ブートストラップclearfixクラスを使用できます。これを行うには、コードは次のようになります。

<ul class="nav nav-tabs span2">
  <li><a href="./index.html"><i class="icon-black icon-music"></i></a></li>
  <li><a href="./about.html"><i class="icon-black icon-eye-open"></i></a></li>
  <li><a href="./team.html"><i class="icon-black icon-user"></i></a></li>
  <li><a href="./contact.html"><i class="icon-black icon-envelope"></i></a></li>
</ul>
<!-- Notice this following line -->
<div class="clearfix"></div>
<div class="well span6">
  <h3>I wish this appeared on the next line without having to gratuitously use BR!</h3>
</div>
于 2012-07-16T08:54:12.403 に答える
14

Twitter Bootstrap にはclearfix、フローティングをクリアするために使用できるクラスがあると思います。

<ul class="nav nav-tabs span2 clearfix">
于 2012-07-16T08:44:12.307 に答える
5

コメントで言及されている KingCronus のように、行クラスを使用して、独自の行にリストまたは見出しを作成できます。いずれかまたは両方の要素で行クラスを使用できます。

<ul class="nav nav-tabs span2 row">
  <li><a href="./index.html"><i class="icon-black icon-music"></i></a></li>
  <li><a href="./about.html"><i class="icon-black icon-eye-open"></i></a></li>
  <li><a href="./team.html"><i class="icon-black icon-user"></i></a></li>
  <li><a href="./contact.html"><i class="icon-black icon-envelope"></i></a></li>
</ul>

<div class="well span6 row">
  <h3>I wish this appeared on the next line without having to gratuitously use BR!</h3>
</div>
于 2013-09-30T11:20:19.273 に答える