1

ボタンと3つの入力ボックスがあり、Bootstrapを使用しているこのフィドルを参照してください。

<div class='container'>
    <div class='row'>
        <form class='span10'>
            <input type='text' placeholder='Label' id='new-row-label' class='span3'>
            <input type='text' placeholder='Orders' id='new-row-orders' class='span2'>
            <input type='text' placeholder='Items' id='new-row-items' class='span2'>
            <div class='btn span2' id='add-row'>Add new item</div>
        </form>
    </div>
</div>​

ここでは2つのことが間違っています。

  1. ボタンは入力ボックスより少し低くなっています。
  2. ボタンは左側にあり、私のコードでは入力ボックスの後に表示されます。

3つの入力ボックスとボタンをすべて同じ高さに配置し、ボタンを右側に配置するにはどうすればよいですか？

4

2 に答える 2

2

このようにpull-rightクラスを追加するとbtn

<div class='btn pull-right span2' id='add-row'>Add new item</div>

この例のように右側のボタンを浮かせますが、私には低く見えません。

于 2012-09-24T19:14:55.333 に答える
2

フォームクラスを使用して、インラインフォームを作成します。 

<form class="form-inline">
    <div class="row">
        <input type='text' placeholder='Label' id='new-row-label' class='span3'>
        <input type='text' placeholder='Orders' id='new-row-orders' class='span2'>
        <input type='text' placeholder='Items' id='new-row-items' class='span3'>
        <button type="button" class="btn" id='add-row'>Add new item</button>
    </div>
</form>

FORMタグのclass="span10"もレイアウトを破棄していました。

http://twitter.github.com/bootstrap/base-css.html#forms

于 2012-09-24T19:24:03.793 に答える