3

Twitter Bootstrap を使用しています。すべてうまくいきますが<p>some text with the font-size of 50px</p>、親から飛び出し<div>ます。スタイルシートとして bootstrap.min.css を削除すると、すべて問題ありません。

自分の css ファイルに p タグの追加プロパティがないため、Twitter Bootstrap が段落にいくつかのプロパティ (高さ、垂直方向のパディング) を適用しているようです。

<p>そのようにすべてを修正する方法は<p>Paragraph text could be any size and not jump out of the parent div</p>？

OK、ここにアップデートがあります：

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  <style>
    p {
      border:1px solid red;
      font-size:55px;
    }
  </style>
</head>

<body>
  <p>The text of more than 18 px is out of the red border if bootstrap.min.css connected </p>
</body>

テストのために、bootstrap.min.css を接続することを忘れないでください。

4

2 に答える 2

1

他の人が言ったように、ブートストラップが行う唯一の（重要な）ことpは次のとおりです。

font-size: 13px;
line-height: 18px;

両方ともから継承されbodyます。そのための最も簡単な修正は、line-height値をfont-relative値に置き換えることです。

p{
  line-height: 1.4em;
}
于 2012-08-01T14:40:53.173 に答える
1

サイト内のすべての段落要素を 55px の font-size に変更するのはお勧めできません。基本要素を最小限の使用のカスタマイズで上書きしないでください。独自のカスタム段落クラスを作成し、大きなテキストが必要なときにそれを使用することは、より良い解決策だと思います。

p.large {
    border: 1px solid red;
    font-size: 55px;
    line-height: 60px;
}

<p class="large">some text with the font-size of 55px</p>
于 2012-08-01T15:08:44.533 に答える