Twitter Bootstrap CSS 静态-流体表单定位

Question

我正在使用Twitter Bootstrap框架，尝试实现以下布局：

现在它是这个样子：

我会尽力帮助您进行翻译。以下是关于编程的内容：

jsFiddle 全屏

jsFiddle

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

我尝试了基于静态宽度侧边栏/流体内容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 {

}

- jared_flack

---

在这里回答了一个类似的问题。在某些情况下，响应式是无用的，您应该修复大小（至少要有最小尺寸）。最好有一个可以滚动的页面，而不是一个只有2个字母的输入框。我的看法是，流体设计+min-width是您的最佳选择。 - Sherbrow

检查控件的最小宽度。它们似乎已经停止调整大小，但容器仍在缩小。 - jmag

Answer 1

您将整个表单放入span3中，它大约占据了行宽的25%。因此，如果分辨率很高，则span3不足以容纳整个表单。在较小的分辨率下，span3的宽度变为100％，并且看起来很好。只需使用其他span类，并仔细计算span类中的数字。像这样 这里。此外，我更喜欢使用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。因为子元素可以再次是span元素的和为12。在此示例中，“content1”将在大分辨率下使用25％的宽度，但在小分辨率下将具有100％的宽度。在大分辨率下，“content2”和“content3”将具有父元素宽度的100％，但那是容器宽度的75％。在小分辨率下，所有span类都将具有100％的宽度。如果您不希望在某些情况下出现这种情况，请使用自己的类覆盖默认的bootstrap css。

我希望你能理解我的意思。对于我的英语，很抱歉 :)

- Miljan Puzović

Answer 2

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

- Bunlong

Answer 3

和许多CSS框架一样，您必须非常小心地处理padding。将其去掉。

.patch-well {
  padding: 20px;
}

- Zombo

Answer 4

Bootstrap 也可以让你模拟对象的最小宽度，而无需使整个布局变得流式。在您的情况下，您可以尝试使包装器跨越和导航栏的行不是流动的。

- Zachary Kniebel