web-dev-qa-db-ja.com

Twitter bootstrap=要素の後に改行を作成するにはどうすればよいですか？

これはとても単純なことのように思えるので、おaび申し上げます。

次の要素が改行上にあるように改行を挿入する正しい方法は何ですか？いくつかのことがこれを自動的に行うようです（<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などの後に改行を処理する正しいまたはエレガントな方法は何ですか？これを処理するコードの一般的なセットアップを見落としていますか？

htmltwitter-bootstrapcss-floathtml-listsclearfix
32
Danny

span6とspan2を使用しています。これらのクラスは両方とも「float:left」を意味し、可能な場合は常に隣同士に座ろうとします。 Twitter bootstrapは12グリッドシステムに基づいています。そのため、通常、合計でspan**#**を取得して12まで追加する必要があります。

例：span4 + span4 + span4 OR span6 + span6 OR 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>
53
Alexander Wigmore

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

<ul class="nav nav-tabs span2 clearfix">
13
Christofer Eliasson

コメントで言及されたKingCronus のように、 row クラスを使用してリストを作成したり、独自の行に見出しを付けることができます。片方または両方の要素で行クラスを使用できます。

<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>
5
WhiteKnight

ブートストラップ4：

<div class="w-100"></div>

ソース： https://v4-alpha.getbootstrap.com/layout/grid/#equal-width-multi-row

2
MixerOID

br要素の使用は問題ありません。要素間に多くのスペースを必要としない限り、コードを読んだり、使用しているスペーシングロジックを理解したりできるので、実際には論理的なことです。

別の方法は、空白のカスタムクラスを作成することです。 bootstrap 4で使用できます

<div class="w-100"></div>

ページ全体に空白行を作成しますが、これは<br>タグを使用する場合と同じです。空白用のカスタムクラスを作成することのマイナス面は、コードを表示する他の人にとって読むのが苦痛になる可能性があることです。カスタムクラスは、使用するたびに同じ量の空白を適用するため、同じページに異なる量の空白が必要な場合は、いくつかの空白クラスを作成する必要があります。

ほとんどの場合、使いやすさと読みやすさのために、<br>または<div class="w-100"></div>を使用する方が簡単です。きれいに見えませんが、機能します。

1
to240

ソリューションがパディングプロパティを使用する可能性があります。

<div class="well span6" style="padding-top: 50px">
    <h3>I wish this appeared on the next line without having to 
        gratuitously use BR!
    </h3>
</div>
0
Fabrizzio