0

我正在尝试使用 Twitter Bootstrap 进行 2 列布局。为了简单起见，假设我们使用 Jade：

.container
  .row
    .span3
      label Email:
      input(type="text")
      label Password:
      input(type="text")
      input(type="submit")
    .span9
      h1 Hello, world!
      p This is a paragraph.

所以，我的主要问题是输入的宽度小于 span3，当我为输入指定 .span3 时，它会破坏网格布局，同时调整 .span3 的大小。

还有一个常见的问题：BS 中元素类的主要规则是什么？我应该将所有元素包装在 .spanN 中吗？这段代码：

.row
  .span3
    h1 Hello

工作方式与简单相同：

.row
  h1.span3 Hello

一切都在我的脑海里搞砸了:(

4

1 回答 1

1

尝试在您的输入上使用“输入块级”类。

例如

<input type="text" class="btn input-block-level">

要拥有全宽的按钮元素，您可以尝试将它们的宽度设置为 100% 并使它们显示块，例如

button {
    display: block;
    width: 100%;
}

请记住，为该按钮添加填充和/或边框会使按钮的宽度大于 100%，因此在这种情况下，您还可以在其上设置 box-sizing。

button { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
于 2013-03-18T11:39:47.093 回答