Twitter Bootstrap CSS 静态流体表单定位答案

【问题标题】：Twitter Bootstrap CSS static-fluid form positioningTwitter Bootstrap CSS 静态流体表单定位
【发布时间】：2012-07-29 01:51:17
【问题描述】：

我正在使用 Twitter Bootstrap 框架试图获得这样的布局：

这就是现在的样子：

jsFiddle fullscreen

jsFiddle

表单容器的宽度根据浏览器的宽度而变化（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 {

}

【问题讨论】：

回答了类似的问题here。在某些时候响应是无用的，你应该修复尺寸（至少最小尺寸）。最好有一个页面滚动而不是输入 2 个字母。恕我直言流体+min-width 是您的最佳选择。
检查控件的最小宽度。他们似乎已经停止调整大小，但容器继续缩小。

标签： html css twitter-bootstrap

【解决方案1】：

你把整个表格放到 span3 中，它大约是行宽的 25%。因此，如果分辨率很大，span3 不足以包含整个表格。在较小的分辨率上，span3 的宽度变为 100%，并且在较小的分辨率上看起来不错。只需使用其他一些跨度类，并仔细计算跨度类中的数字。 Like here 另外，我更喜欢使用 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% 的宽度 od 父元素，我将使用 row-fluid。因为子元素可以再次跨越 12 个元素的总和。在此示例中，“content1”将在大分辨率下使用 25% 的宽度，但在小分辨率下它将具有 100% 的宽度。在大分辨率下，“content2”和“content3”将具有父级宽度的 100%，但也就是容器宽度的 75%。在小分辨率下，所有跨度类都将具有 100% 的宽度。如果在某些情况下您不希望这样，只需使用您的类覆盖默认引导 css。

我希望你明白我的意思。对不起我的英语:)

【讨论】：

【解决方案2】：

这是你想要的http://jsfiddle.net/YxKfc/14/，请查收。

【讨论】：

【解决方案3】：

与许多 CSS 框架一样，您必须非常小心 padding。把它拿掉

.patch-well {
  padding: 20px;
}

【讨论】：

【解决方案4】：

bootstrap 还允许您模拟对象的最小宽度，而不要求您使整个布局变得流畅。在您的情况下，您可以尝试使该导航的包装器跨度和行不流畅。

【讨论】：