Question

我已经尝试过各种方式来模仿风格和列中的这种外观，但是无法通过Bootstrap 3获得它。

有人可以为此列出twitter bootstrap标记：

我已经被困了几天了。

我尝试了以下内容：

<div class="container">
 <div class="row">
  <div class="col-md-8"></div>
  <div class ="col-md-4"></div>
</div>
</div>

感谢

Answer 1

演示：http://www.bootply.com/BCsPapR7Ww

<强> HTML：

<div class="jumbotron">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
      <div class="page-header">
           <h1>Example page header<br><small>Subtext for header</small></h1>
      </div>
      </div>

      <div class="col-sm-6">
      <div class="row">
        <div class="col-sm-4">Menu option 1</div>
        <div class="col-sm-4">Menu option 2</div>
        <div class="col-sm-4">Menu option 3</div>
      </div>  
      </div>
    </div>  
  </div>
</div>
<div class="container">
<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://placekitten.com/g/600/600">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://placekitten.com/g/600/600">
    </a>
  </div>  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://placekitten.com/g/600/600">
    </a>
  </div>  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://placekitten.com/g/600/600">
    </a>
  </div>  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://placekitten.com/g/600/600">
    </a>
  </div>  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://placekitten.com/g/600/600">
    </a>
  </div>  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://placekitten.com/g/600/600">
    </a>
  </div>  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://placekitten.com/g/600/600">
    </a>
  </div>  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://placekitten.com/g/600/600">
    </a>
  </div>  
</div>
</div>

<nav class="text-center">
      <ul class="pagination">
        <li class="disabled"><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
     </ul>
   </nav>

<footer class="container">
  <div class="row">
    <div class="text-center"><a href="#">link 1</a> | <a href="#">link 2</a></div>
    <div class="text-center">Powered by Bootstrap</div>
  </div>  
</footer>

需要Paypal的正确引导类

1 个答案: