1

一貫性のないヘルプラインはかなり見苦しいと思います。簡単に美化できる方法はありますか？

これが私が話していることの基本的な例です: http://jsfiddle.net/TyBwc/1/

<form class="form form-horizontal">
    <div class='control-group'>
        <label class='control-label' for='inputWarning'>Input with warning</label>
        <div class='controls'>
            <input id='inputWarning' type='text'>
            <span class='help-inline'>Something  afdaf da</span>
        </div>
    </div>
    <div class='control-group'>
        <label class='control-label' for='inputWarning'>Input with warning</label>
        <div class='controls'>
            <input id='inputWarning' type='text'>
            <span class='help-inline'>Something  afdaf da Something  afdaf da Something  afdaf da Something  afdaf da Something  afdaf da Something  afdaf da </span>
        </div>
    </div>
</form>

ご覧のとおり、ヘルプ テキストが短い場合は見栄えがよくなりますが、オーバーフローすると下に下がり、一貫性のない外観になります。

一種の 3 列レイアウトを使用して、長いヘルプ テキストをフォームの右側に配置するにはどうすればよいでしょうか? または、下部にオーバーフローする場合、より大きな上部マージンを作成する可能性がありますか? そしてできれば、小さな画面が悪影響を受けないように、すべてをレスポンシブに保ちたいと思います。

4

2 に答える 2

1

メディア クエリを使用して、小さな画面のテキスト入力の下に表示できます。

@media only screen and (max-width: 480px) {
  .help-inline {
    display: block;
    float: none;
  }
}
于 2013-08-09T21:18:01.757 に答える
0

これでうまくいきます。

.hil {
    width:200px;   
}

<span class='help-inline hil'> Long Text </span>

下の画像を参照してください

デスクトップ レイアウト

レスポンシブレイアウト

于 2013-08-09T21:33:42.463 に答える