带有bootstrap v3.3的两个列页面

时间：2014-11-02 03:43:00

标签： html twitter-bootstrap

我正在尝试在bootstrap中实现两个列页面，就像在此网页中一样。我是bootstrap的新手，刚刚了解了网格。我想在下面这样做。

<div class="row">
        <div class="col-md-8">
            <h2>HTML</h2>
            <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>
            <p><a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
        </div>

  <div class="col-md-4">
            <h2>HTML</h2>
            <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>
            <p><a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
        </div>
</div>

我将页面左右分为8-4。但是，我注意到当左边的行增加时，它会向右推动。然后我想也许他们不能在同一排。我尝试过如下。

<div class="row">
            <div class="col-md-8">
                <h2>HTML</h2>
                <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>
                <p><a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
            </div>
    </div>
<div class="row">
      <div class="col-md-4">
                <h2>HTML</h2>
                <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>
                <p><a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
            </div>
    </div>

当我放入一个单独的行时，我无法实现这两列。我试过了

<div class="row-right">
<div class="col-right col-md-4">

所有认为应该根据文档或我学到的小知识，但没有任何改变。请帮助我希望它在此页面中http://www.stjobs.sg/singapore-jobs/retail-merchandising-job？

更新

下面是整个脚本。     

    <div class="row">
        <div class="col-md-8">
            <h2>HTML</h2>
            <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>
            <p><a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
        </div>

          <div class="col-md-8">
            <h2>HTML</h2>
            <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>
            <p><a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
        </div>
         <div class="col-md-8">
            <h2>HTML</h2>
            <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>
            <p><a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
        </div>
         <div class="col-md-8">
            <h2>HTML</h2>
            <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>
            <p><a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
        </div>
         <div class="col-md-8">
            <h2>HTML</h2>
            <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>
            <p><a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
        </div>
         <div class="col-md-8">
            <h2>HTML</h2>
            <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>
            <p><a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
        </div>
         <div class="col-md-8">
            <h2>HTML</h2>
            <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>
            <p><a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
        </div>


         <div class="col-md-4">
            <h2>HTML</h2>
            <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>
            <p><a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
        </div>

    </div>
    <hr>
    <div class="row">
        <div class="fixed col-sm-12">
            <footer>
                <p>© Copyright 2013 Tutorial Republic</p>
            </footer>
        </div>
    </div>
</div>

2 个答案:

答案 0 :(得分：1)

这是正确的（假定.container围绕内容）：

<div class="row">
        <div class="col-md-8">
            <h2>HTML</h2>
            <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>
            <p><a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
        </div>

  <div class="col-md-4">
            <h2>HTML</h2>
            <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>
            <p><a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
        </div>
</div>

根据文档及其不起作用的方式，第二个示例不正确。

答案 1 :(得分：1)

比你想象的更简单。所有内容应该在一列上，其余内容在另一列上：

<div class="row">

  <div class="col-md-8">
      ALL CONTENT HERE
  </div>

  <div class="col-md-4">
      OTHER CONTENT HERE
  </div>

</div>

您不必须在布局的其他div中放置任何更多col-md-8和col-md-4。只需将您的内容放在任何课程中。 

<div class="row">

      <div class="col-md-8">
          <h2>My Heading</h2>
          <p>My text.</p>

          <h2>My Heading</h2>
          <p>My text.</p>

          <h2>My Heading</h2>
          <p>My text.</p>

          <h2>My Heading</h2>
          <p>My text.</p>
      </div>

      <div class="col-md-4">
          <h2>My Heading</h2>
          <p>My text.</p>
      </div>

</div>
相关问题
最新问题