0

これを開始するのは私の最初の質問であり、stackoverflowにアクセスします。これは、実際に何かをプログラムしようとするのは初めてです。

ツイッターのブートストラップに問題があります！

2行目に段落が1つしかない理由がわかりません。

ページのスクリーンショットをアップロードできません。どうすればよいですか？

これが私のコードです：

<div class="container">

  <!-- Main hero unit for a primary marketing message or call to action -->
  <div class="hero-unit">
    <h1>Hello, world!</h1>
    <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
    <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
  </div>

  <!-- Example row of columns -->
  <div class="row">
    <div class="span4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
   </div>
    <div class="span4">
      <h2>Heading</h2>
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  </div><!-- end row 1 -->

  <div class="row">
    <div class="span3">
    <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  </div><! -- end row 2 -->

  <div class="row">
    <div class="span3">
    <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  <div class="row">
    <div class="span3">
    <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  <div class="row">
    <div class="span3">
    <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="row">
    <div class="span3">
    <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  </div><!-- end row 2 --> 
  <hr>
4

2 に答える 2

0

それはまさにあなたが求めるものだからです：

<!-- Example row of columns -->
<div class="row">
    <div class="span4">
    </div>
    <div class="span4">
    </div>
    <div class="span4">
    </div>
</div><!-- end row 1 -->

<div class="row">
    <div class="span3">
    </div>
</div><! -- end row 2 -->

<div class="row">
    <div class="span3">
    </div>
    <div class="row">
        <div class="span3">
        </div>
        <div class="row">
            <div class="span3">
            </div>
            <div class="row">
                <div class="span3">
                </div>
            </div><!-- end row 2 -->

また、あなたはもっと必要です

</div>

あなたの混乱は、すべての行が同じであるという事実から来ています

各行に特定の名前 (Header1、header2...) を付けると、何が問題なのかが正確にわかります。

于 2012-08-29T12:11:29.530 に答える
0

それは単純な問題です。実際には、思っているよりも多くの行があります。

物事の音から、2 つの最上位行 (つまり、コンテナー div の幅全体に広がる行) が必要です。

これは、実際に得たものを簡略化したバージョンです (注: わかりやすくするために、ヒーロー ユニットとコンテンツを削除しています)。

<div class="container">

  <!-- start of first row -->
  <div class="row">
    <div class="span4">
    </div>
    <div class="span4">
    </div>
    <div class="span4">
    </div>
  </div><!-- end of first row -->

  <!-- start of second row -->
  <div class="row">
    <div class="span3">
    </div>
  </div><!-- IMPORTANT: This closing div actually closes your second row -->

  <!-- start of third row, IMPORTANT: you have failed to close this div -->
  <div class="row">
    <div class="span3">
    </div>
    <!-- start of fourth row, IMPORTANT: you have failed to close this div -->
    <div class="row">
      <div class="span3">
      </div>
      <!-- start of fifth row, IMPORTANT: you have failed to close this div -->
      <div class="row">
        <div class="span3">
        </div>
        <!-- start of sixth row, IMPORTANT: you HAVE closed this div -->
        <div class="row">
          <div class="span3">
          </div>
       </div><!-- you have erroniously identified this closing div as being the end of row 2, when it is actually the end of row 6 --> 
    <!-- IMPORTANT: you fail to close the container in your posted code -->

ご覧のとおり、div が少し混乱しています。

行 2 が突然終了することに注意することが重要です。3 行目以降のものを 2 行目に表示したい場合は、それを含む div にコードを移動する必要があります。

このようなもの：もっと役立つかもしれません：

<div class="container">

  <!-- start of first row -->
  <div class="row">
    <div class="span4">
    </div>
    <div class="span4">
    </div>
    <div class="span4">
    </div>
  </div><!-- end of first row -->

  <!-- start of second row -->
  <div class="row">
    <div class="span3">
    </div>
    <div class="span3">
    </div>
    <div class="span3">
    </div>
    <div class="span3">
    </div>
    <div class="span3">
    </div>
  </div><!-- end of row 2 -->
</div><!-- IMPORTANT: don't forget to close the  container -->

これにより、2 つの行が得られます。最初の行には 3 つのスパンが含まれ、2 番目の行には 4 つのスパンが含まれます。

于 2012-08-29T12:11:47.273 に答える