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 を指定すると、サイズ変更中にグリッド レイアウトが壊れます。

そしてよくある質問: BS の要素のクラスの主なルールは何ですか? すべての要素を .spanN でラップする必要がありますか? このコード:

.row
  .span3
    h1 Hello

シンプルと同じように動作します:

.row
  h1.span3 Hello

私の頭の中ですべてが台無しになりました:(

4

1 に答える 1

1

入力で「input-block-level」クラスを使用してみてください。

例えば

<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 に答える