Question

我正在尝试使用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时，它会在调整大小时打破网格布局。

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

.row
  .span3
    h1 Hello

的工作方式与简单相同：

.row
  h1.span3 Hello

一切都搞砸了我的脑袋:(

Answer 1

尝试在输入上使用“input-block-level”类。

E.G。

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

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

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

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

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+ */
}

使用Twitter Bootstrap进行2列布局

1 个答案: