Question

我使用CSS和bootstrap标准创建的各个元素然后让它们堆叠起来，就像我不知道从哪里开始一样。有可能吗？

Answer 1

根据上面的图片，我认为此代码对您有所帮助......

中找到该示例

＆＃13;

<!DOCTYPE html>
<html>
    <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>
<div class="row">
    <div class="col-sm-6 left-pane">

    </div>
    <div class="col-sm-6">
        <div class="row">
            <div class="col-sm-3">
                <img src="image.jpg" class="icon">
            </div>
            <div class="col-sm-9">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3">
                <img src="image.jpg" class="icon">
            </div>
            <div class="col-sm-9">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3">
                <img src="image.jpg" class="icon">
            </div>
            <div class="col-sm-9">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

＆＃13;

{{1}}

＆＃13;

Answer 2

试试这段代码..

http://codepen.io/anon/pen/zrdrVd

<div class="container">
    <div class="row">

        <div class="col-md-6">

            <img src="http://placehold.it/1000x550" alt="test" class="img-responsive">

            <div class="carousel-caption">
              <h1>Example headline.</h1>
            </div>

         </div>
              <div class="col-md-6">

            <div class="col-md-12">
          <h1>Example headline.</h1>


         </div>
                     <div class="col-md-12">

           <h1>Example headline.</h1>

         </div>
                     <div class="col-md-12">

           <h1>Example headline.</h1>

         </div>

         </div>


 </div>


</div>

Answer 3

您可能希望更多地了解bootstrap grid system的可能性。

通过创建两个半宽（12个中的6个）列，然后在右列内嵌套3行来实现该布局。示例：https://jsfiddle.net/edjgdg2s/

<div class="container">
  <div class="row margin-bottom">
    <div class="col-xs-6 col-xs-offset-3 border">
    </div>
  </div>

  <div class="row">
    <div class="col-xs-6 tall border">
    </div>

    <div class="col-xs-6">
      <div class="row">
        <div class="col-xs-12 border">
        </div>
      </div>

      <div class="row">
        <div class="col-xs-12 border">
        </div>
      </div>

      <div class="row">
        <div class="col-xs-12 border">
        </div>
      </div>
    </div>
  </div>
</div>

如何用CSS实现这种布局？

3 个答案: