8

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

所需布局

这是它现在的样子：

当前布局

jsFiddle 全屏

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 {

}
4

4 回答 4

2

您将整个表格放入 span3 中，大约是行宽的 25%。因此，如果分辨率很大，span3 不足以包含整个表格。在较小的分辨率上，span3 的宽度变为 100%，并且在较小的分辨率上看起来不错。只需使用其他一些跨度类，并仔细计算跨度类中的数字。像这里一样，我更喜欢使用 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。

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

于 2012-07-29T02:40:24.610 回答
1

这就是你想要的http://jsfiddle.net/YxKfc/14/，请检查一下。

于 2012-07-29T03:19:12.883 回答
0

与许多 CSS 框架一样，您必须非常小心padding. 把这个脱掉

.patch-well {
  padding: 20px;
}
于 2012-07-29T02:02:47.723 回答
0

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

于 2012-07-29T02:16:18.457 回答