Question

我想让右侧标记为红色的列（参见附图）成为在页面下方进一步扩展的电缆而不影响底部其他故事的行布局。我使用bootstrap，每次我放入更多文本，整个网格向下移动。我应该使用span而不是列吗？

Layout in red

这是我到目前为止所获得的代码。

<div class="container">

    <div class="row">

      <div class="span1">
        <h6 class="text-center" style='font-family: "DroidSerif",serif;'>Here's Why 9/11 Conspiracy</h6>
      </div>

      <div class="text-center">
        <h9 class="span10">Newspaper</h9>
      </div>

      <div class="span1">
        <h6 class="text-center">Here's Why 9/11 Conspiracy</h6>
      </div>

    </div>

    <hr style="height:0.3em;" color= '#000000' />
    <hr>
    <div class="row">

     <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->

     <div class="span4">


      <h4 class="text-center">Here's Why 9/11 Conspiracy Theories Still Thrive In America</h4>
      <h5 class="text-center" style='font-family: "DroidSerif",serif;'><i>Mr.Man</i></h5>
      <hr>

      <p style='font-family: "DroidSerif",serif;'><span class="firstcharacter">D</span>ublin, It was a sunny and clear Tuesday morning in Knoxville, Tennessee. Sitting in the kitchen of my girlfriend's apartment, I was eating a bowl of cereal -- Honey Nut Cheerios, I still remember -- and browsing the web before making the 15-minute drive to campus for class.

      </p>

      </div>

      <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->

      <div class="span6">
        <h1 style='font-family: "DroidSerif",serif;'>Terrorists are plotting to blow up five planes</h1>

        <p><b>The threat has been taken so seriously it came close to leading to an outright ban on all hand luggage, a senior insider has revealed.

          </b></p>

        </div>

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->

        <div class="span2">
          <h4 style='font-family: "DroidSerif",serif;'>Trending Stories</h4>
          <hr>
          <h5 style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
          <story>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 <b> amet risus.</b></story>

          <h5  style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
          <story>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.  <b> amet risus.</b></story>

          <h5  style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
          <story>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.<b> amet risus.</b></story>

        </div>

      </div>

      <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->

      <!-- Fav and touch icons -->
      <div class="row">
      <hr class="span10" style="height:0.3em;" color= '#3090C7' />
      </div>

      <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
      <div class="row" class="span10">

        <div class="span2">
          <h5 class="text-center" style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
          <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. Donec id elit non  </p> 
        </div>

        <div class="span2">
          <h5 class="text-center" style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
          <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. Donec id elit non  </p>
        </div>

        <div class="span2">
          <h5 class="text-center" style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
          <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. Donec id elit non  </p>
        </div>

        <div class="span2">
          <h5 class="text-center" style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
          <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. Donec id elit non  </p>
        </div>

        <div class="span2">
          <h5 class="text-center" style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
          <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. Donec id elit non  </p> 
        </div>

      </div>
    </div>

Answer 1

Bootstrap非常简单易用，不用担心你会得到它。

您需要做的就是创建一个包含2列(.col-sm-10)的行，一行用于填充图像的左侧内容，第二行用于您的红色框(.col-sm-2)。 这里的主要动机是创建一个12列网格系统。

然后在第一列中创建另一行并再次添加2列，一列用于9/11 Conspiracy news，另一列用于terrorists are plotting news

现在是你的蓝色<hr>分隔符，然后创建另一行并为other stories section添加4列

我使用了最受欢迎的bootstrap version 3.3.1来展示您的解决方案。

小提琴演示：http://jsfiddle.net/auy5y8e1/

调整小提琴窗口的大小以查看其工作正常......

HTML：

<div class="container">
    <div class="row">
        <div class="col-sm-10">
            <div class="row">
                <div class="span1">
                     <h6 class="text-center" style='font-family: "DroidSerif",serif;'>Here's Why 9/11 Conspiracy</h6>
                </div>
                <div class="text-center">
                    <h9 class="span10">Newspaper</h9>
                </div>
                <div class="span1">
                     <h6 class="text-center">Here's Why 9/11 Conspiracy</h6>
                </div>
            </div>
            <hr style="height:0.3em;" color='#000000' />                    
            <div class="row">                       
                <div class="col-sm-6">
                     <h4 class="text-center">Here's Why 9/11 Conspiracy Theories Still Thrive In America</h4>
                     <h5 class="text-center" style='font-family: "DroidSerif",serif;'><i>Mr.Man</i></h5>
                    <hr>
                    <p style='font-family: "DroidSerif",serif;'><span class="firstcharacter">D</span>ublin, It was a sunny and clear Tuesday morning in Knoxville, Tennessee. Sitting in the kitchen of my girlfriend's apartment, I was eating a bowl of cereal -- Honey Nut Cheerios, I still remember -- and browsing the web before making the 15-minute drive to campus for class.</p>
                </div>                      
                <div class="col-sm-6">
                    <h1 style='font-family: "DroidSerif",serif;'>Terrorists are plotting to blow up five planes</h1>
                    <p><b>The threat has been taken so seriously it came close to leading to an outright ban on all hand luggage, a senior insider has revealed.</b></p>
                </div>                                              
            </div>                  
            <div class="row">
                <hr class="span10" style="height:0.3em;" color='#3090C7' />
            </div>                  
            <div class="row">
                <div class="col-sm-3">
                     <h5 class="text-center" style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
                    <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. Donec id elit non</p>
                </div>
                <div class="col-sm-3">
                     <h5 class="text-center" style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
                    <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. Donec id elit non</p>
                </div>
                <div class="col-sm-3">
                     <h5 class="text-center" style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
                    <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. Donec id elit non</p>
                </div>
                <div class="col-sm-3">
                     <h5 class="text-center" style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
                    <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. Donec id elit non</p>
                </div>                      
            </div>
        </div>
        <div class="col-sm-2">
            <div>
                <h4 style='font-family: "DroidSerif",serif;'>Trending Stories</h4>
                <hr>
            </div>
            <h5 style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
            <story>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 <b> amet risus.</b></story>                       <h5 style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
            <story>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. <b> amet risus.</b></story>
            <h5 style='font-family: "DroidSerif",serif;'><i>Other Story</i></h5>
            <story>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.<b> amet risus.</b></story>
        </div>
    </div>
</div>

试图让Bootstrap布局正常工作

1 个答案: