Twitter Bootstrap CSS 静态流体表单定位

我正在使用 Twitter Bootstrap 框架尝试获得如下布局：

现在看起来是这样的：

jsFiddle 全屏 https://jsfiddle.net/flackend/YxKfc/show

jsFiddle https://jsfiddle.net/flackend/YxKfc/

表单容器的宽度根据浏览器的宽度而变化（Twitter Bootstrap 的 CSS 媒体查询）。图标框的宽度始终为 14px。

我尝试了基于 static-width-sidebar/fluid-content CSS 布局的不同方法来尝试填充文本输入宽度。

我认为我唯一的选择是制作自己的 CSS 媒体查询来定义文本输入的绝对宽度。

<div class="container">
    <div class="row">
        <section class="span9">
            <h2>Our Theme</h2>
            <p>lorem ipsum...</p>
        </section>
        <div class="span3">
            <section class="patch-well">
                <h2>Contact Us</h2>
                <p>Send a message......lorem ipsum...</p>
                <form>
                    <fieldset class="control-group">                        
                        <div class="input-prepend">
                            <span class="add-on">
                                <i class="icon-user"></i>
                            </span><input type="text">
                        </div>
                        <div class="input-prepend">
                            <span class="add-on">
                                <i class="icon-envelope"></i>
                            </span><input type="text">
                        </div>
                        <textarea></textarea>
                        <button type="submit" class="btn btn-default">Send message</button>
                    </fieldset>
                </form>
            </section>
        </div>
    </div><!-- row -->
</div>

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');

body { padding: 10px }

.patch-well {
  color: #FFF;
  background: url('http://subtlepatterns.com/patterns/darkdenim3.png') repeat;
  padding: 20px;
  text-align: center;

  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;

  -moz-box-shadow: 0 0 5px #000;
  -webkit-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}

.input-prepend {

}

.input-prepend .add-on {

}

.input-prepend input {

}

你把整个表格放入span3中，它大约是行宽的25%。因此，如果分辨率很大，span3 不足以包含整个表格。在较小的分辨率上，span3 的宽度变为 100%，并且在小分辨率上看起来不错。只需使用其他一些跨度类，并仔细计算跨度类中的数字即可。像这儿 http://twitter.github.com/bootstrap/scaffolding.html另外，我更喜欢使用 row-fluid 类而不是 row 类，它更容易操作宽度。

始终使用这样的结构

<div class="row-fluid">
  <div class"span3">
     <!-- content1 -->
  </div>
  <div class"span9">
     <div class="row-fluid">
        <div class="span6">
           <!-- content2 -->
        </div
        <div class="span6">
           <!-- content3 -->
        </div
     </div>
  </div>
</div>

请注意，如果我想要设计中没有浮动的新行，并且如果我想要父元素的宽度为 100%，我将使用 row-fluid。因为子元素也可以是 12 个元素的总和。在此示例中，“content1”在大分辨率下将使用 25% 的宽度，但在小分辨率下它将使用 100% 的宽度。在大分辨率中，“content2”和“content3”将具有父级宽度的 100%，但这是容器宽度的 75%。在小分辨率下，所有跨度类都将具有 100% 宽度。如果您在某些情况下不希望这样做，只需使用您的类覆盖默认的 bootstrap css 即可。

我希望你明白我的意思。对不起我的英语不好 ：）