1

Twitterのブートストラップを学び始め、非常にシンプルなレイアウトを作成しました。

ブラウザーの幅を変更すると、ブラウザーの幅が 768px を下回ると、行の 2 つの div が見えなくなります。それ以外の場合、div は互いに重なり合っています。

マージンなしで div を表示したいのですが、最も重要なことは、目に見えることです!

ここにplnkrがあります。

4

2 に答える 2

0

これを head セクションに追加します。両方のスタイルが必要な量を超えてブラウザの幅を変更するため

<!DOCTYPE html>
<html>

  <head>
  <style type=text/css>
  .container{
    width:100% !important;
    }
    .row div{
      width:100%;
      margin:0px !important;
      padding:0px !important;
      }
  </style>
    <link data-require="twitter-bootstrap@*" data-semver="2.3.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" />
    <link data-require="twitter-bootstrap@*" data-semver="2.3.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" />
    <link data-require="twitter-bootstrap@*" data-semver="2.3.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" />
    <link data-require="twitter-bootstrap@*" data-semver="2.3.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.css" />
    <script data-require="twitter-bootstrap@*" data-semver="2.3.1" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="span 3 red" style="height : 100px"></div>
        <div class="span 9 green" style="height : 100px"></div>
      </div>
    </div>
  </body>

</html>

サイズを変更してもdivが消えず、マージンもありません。

于 2013-09-27T04:36:11.710 に答える
0

あなたの div クラスには、スパンと数字の間にスペースがあります。それはもっと似ているはずです：

<div class="container">
    <div class="row">
        <div class="span12 red" style="height : 100px"></div>
        <div class="span12 green" style="height : 100px"></div>
    </div>
</div>

ブートストラップは 12 列のグリッドで作成され、span12 でコンテナーがいっぱいになりますが、マージンが生じます。

マージンなしで画面全体に表示する場合は、スパンまたはコンテナーを使用しないでください。

<div class="row">
    <div class="red" style="height : 100px"></div>
    <div class="green" style="height : 100px"></div>
</div>

要素にマージンがない場合、通常、コンテンツのコンテナがあります。

 <div class=" red" style="height : 100px">
    <div class="container">
      <div class="row">
      <div class="span12 green" style="height : 100px"></div>
      </div>
    </div>
  </div>

  <div class="green" style="height : 100px">
    <div class="container">
      <div class="row">
         <div class="span12 red" style="height : 100px"></div>
      </div>
    </div>
  </div>

これがplnkrの例です

また、ブートストラップを学習し始めたばかりの場合は、v2.3.1 ではなくv3.0を学習することをお勧めします。バージョン間で変換されないいくつかの違いがあるため、最新のバージョンを学習することもできます。

于 2013-09-27T04:28:03.820 に答える