4

現在ブートストラップを使用しています-2.1.1

2つの列を含むがあり、row-fluidそれらの列の中にinput-prependsがあります。サンプルコードは次のとおりです。

<div class="row-fluid">
   <div class="span6">
      <ul>
         <li>
            <div class="input-prepend box-shadow">
                <span class="add-on">email</span>
                <input type="text" name="email" value="" placeholder="Edit email"/>
            </div>
        </li>
     </ul>
   </div>
   <div class="span6">
      <ul>
         <li>
             <div class="input-prepend box-shadow">
               <span class="add-on">name</span>
               <input type="text" name="name" value="" placeholder="Edit name"/>
             </div>
         </li>

      </ul>
    </div>
</div>

ここでJSBINを見ることができます： http：//jsbin.com/unuruh/1/

問題

CSSのみinput-prependを使用して、親の入力フィールドを全幅（およびブラウザーでサイズ変更）にするにはどうすればよいですか？同じ幅である必要があることに注意してください...add-on

よろしくお願いします。

4

1 に答える 1

8

流体スパン

ここにアプローチがあります：デモ（jsbin）

<li>
  <div class="row-fluid">
    <div class="input-prepend box-shadow clearfix" style="border-radius: 3px;">
     <span class="add-on span2" style="width: 14.2%;float: left;">email</span>
     <input class="span1" style="width: 85.8%;float: left;border-right: 0;border-tradius: 0;border-bottom-right-radius: 0;" type="text" name="#" value="#hello" placeholder="Edit project"/>
   </div>
  </div>
</li>

widthとfloatは、レスポンシブ動作が s に対して行っていることをオーバーライドするためにあります。spanインライン スタイルの残りの部分は、ボックスを少しきれいにすることです。

すべてのラッパーの問題なしで、同様の質問があります: Fluid input-append in Bootstrap Responsive

絶対位置決め

更新バージョン 2.3 :更新されたデモ (jsfiddle)が必要.input-fullwidth { display: block; }です

別のアプローチは、絶対配置を使用することです: Demo (jsfiddle)

.input-prepend.input-fullwidth {
    position: relative;
}
.input-prepend.input-fullwidth .add-on {
    width: 40px;
}
.input-prepend.input-fullwidth .input-wrapper {
    position: absolute;
    display: block;
    left: 51px; /* 40 + 2*5 - 1 */
    right: 0;
    top: 0;
    bottom: 0;
}
.input-prepend.input-fullwidth .input-wrapper input {
    width: 100%;
    height: 100%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

<div class="input-prepend input-fullwidth">
    <span class="add-on">email</span>
    <div class="input-wrapper"><input type="text" name="#" value="#hello" placeholder="Edit project"/></div>
</div>

最終的には、CSS3 (w3.org)のフレックスボックス機能を探しているかもしれません。

于 2012-10-21T09:14:08.447 に答える