ホームページ  >  記事  >  ウェブフロントエンド  >  「行」クラスを変更せずにTwitterブートストラップで行間に垂直方向のスペースを追加する方法は?

「行」クラスを変更せずにTwitterブートストラップで行間に垂直方向のスペースを追加する方法は?

Linda Hamilton
Linda Hamiltonオリジナル
2024-10-30 09:18:27336ブラウズ

How to Add Vertical Space Between Rows in Twitter Bootstrap Without Modifying the

Twitter Bootstrap で行間に垂直方向のスペースを追加する

「行」要素に上マージンを追加すると、Web ページの視覚的な魅力を高めることができます。ただし、Twitter Bootstrap フレームワークで「行」クラスを直接編集することは推奨されません。これはページ構造の重要なコンポーネントであるためです。

これに対処するには、より適切なアプローチとして、次のような新しい CSS クラスを作成します。必要なマージンを提供する「top-buffer」。

<code class="css">.top-buffer {
  margin-top: 20px;
}</code>

このクラスを特定の行に適用すると、「row」要素のデフォルトの動作に影響を与えることなく、上部マージンを追加できます。たとえば、特定の行に 20 ピクセルの上マージンを追加したい場合は、次のマークアップを使用するだけです:

<code class="html"><div class="row top-buffer">
  ...
</div></code>

このメソッドを使用すると、必要なときにいつでも個々の行に上マージンを追加できます。コアの「行」クラスは変更されていません。

以上が「行」クラスを変更せずにTwitterブートストラップで行間に垂直方向のスペースを追加する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。