Question

我正在尝试创建一个布局，其中我将行分为2列，并希望第二列具有特色图像占据列的完整空间。我希望这能以反应灵敏的方式运作。

<div class="container">
        <div class="row">
            <div class="col-md-6 content">
                <div class="row">
                    <div class="col-md-6">
                <img src="http://placehold.it/250X250">
                </div>
                <div class="col-md-6 title">
                    <h3>first title here</h3>
                    <h2>Sub-title goes here</h2>
                </div>
                </div>
            <div class="row">
                 <ul class="col-md-12 main-list">
                        <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li>
                        <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li>
                        <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li>
                        <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li>
                </ul>
                <div class="small-images">
                <img class="small-image1" src="http://placehold.it/200x100">
                <img class="small-image2" src="http://placehold.it/200x100">
                </div>
            </div>
            </div>

            <div class="col-md-6 featured-image">
                <img src="http://placehold.it/300X300">
            </div>
        </div>

Answer 1

您正在使用300*300的图像，这就是占用较少空间的原因，否则您的布局会很好。我提供了一个全宽图像，它在下面的代码片段中工作正常。
要使布局响应，请向<div>s添加不同的类，例如col-md-6 col-sm-6 col-xs-6 col-lg-6。同时将class="img-responsive"添加到您的img标记，以使图像响应。

＆＃13;

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
          </head>
          <body>
          <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 content">
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
                <img src="http://placehold.it/250X250" class="img-responsive">
                </div>
                <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 title">
                    <h3>first title here</h3>
                    <h2>Sub-title goes here</h2>
                </div>
                </div>
            <div class="row">
                 <ul class="col-md-12 col-sm-12 col-xs-12 col-lg-12 main-list">
                        <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li>
                        <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li>
                        <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li>
                        <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li>
                </ul>
                <div class="small-images">
                <img class="small-image1" src="http://placehold.it/200x100" class="img-responsive">
                <img class="small-image2" src="http://placehold.it/200x100" class="img-responsive">
                </div>
            </div>
            </div>

            <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 featured-image ">
                <img src="https://cdn.pixabay.com/photo/2016/02/19/15/46/dog-1210559_960_720.jpg" class="img-responsive">
            </div>
        </div>
        </body>
  </html>

＆＃13;

我希望我的图像占据引导列的完整空间

1 个答案: