如何在右边的内容上制作图像，并在较小的屏幕尺寸时响应？

时间：2016-08-30 03:20:46

标签： html css twitter-bootstrap responsive

我正在尝试创建左边的图像和右边的内容以及替代顺序。正如你可以看到我的图片下面的第二张图片不在右侧。并且对较小的屏幕尺寸没有响应。请帮忙！

enter image description here

这是我的代码：

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

        <title>Example</title>

    <style>
    body {
      margin-top: 50px;
    }

    .img-1 {
      height: 250px;
      width: 350px;
      margin: 10px 50px;

    }


    </style>

      </head>
      <body>

        <div class="container">
            <div class="row">
                <div class="col-md-6 col-sm-6" >
                  <img class="img-1" src="img-1.jpg">
                </div>
                <div class="col-md-4 col-sm-4">
                     <h3>h3 title</h3>
                    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                        Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
                        augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
                        tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
                        massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
                        eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 col-sm-6" >
                  <img class="img-1" src="img-1.jpg">
                </div>
                <div class="col-md-4 col-sm-4">
                     <h3 class="">h3 title</h3>
                    <p class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                        Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
                        augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
                        tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
                        massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
                        eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
                </div>
            </div>
        </div>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

      </body>
    </html>

这对较小的屏幕尺寸没有响应，我该如何解决？

enter image description here

你的帮助非常好！

3 个答案:

答案 0 :(得分：0)

要切换顺序，使图片在右侧，在第二行中，第一个div为class =＆＃34; col-md-6 col-sm-6＆＃34;应该有h3和p，然后是那个行中的第二个div = class =＆＃34; col-md-4 col-sm-4＆＃34;应该有img。要使图像响应，请添加＆＃34; img-responsive＆＃34; img标签中的类，并使您在CSS中定义的高度和宽度为最大高度或最大宽度，以便图像可以缩小到较小的高度/宽度以适合较小的屏幕。

答案 1 :(得分：0)

使用可以使用.col-sm-push-*和.col-sm-pull-* to switch the ordering of grid columns. Here is reference: http://getbootstrap.com/css/#grid-column-ordering。

要使图像响应，请在img标记中添加“img-responsive”类。

.img-1{ 
  margin-bottom:20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-6" >
      <img class="img-1 img-responsive" src="https://pioneerwoman.files.wordpress.com/2010/11/springy-flower-pot-desserts1.jpg">
    </div>
    <div class="col-sm-4">
      <h3>h3 title</h3>
      <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
    Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
    augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
    tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
    massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
    eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
   </div>
 </div>

 <div class="row">
   <div class="col-sm-6 col-sm-push-4" >
     <img class="img-1 img-responsive" src="http://www.blog.designsquish.com/images/uploads/jason-whatever-flower-pots.jpg">
   </div>
   <div class="col-sm-4 col-sm-pull-6">
     <h3 class="">h3 title</h3>
     <p class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
    Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
    augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
    tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
    massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
    eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
   </div>
 </div>
</div>

答案 2 :(得分：0)

看看这是否有帮助。

请点击链接查看其工作原理。 https://jsfiddle.net/2d7vab0t/

HTML：

<img class="img-1" src="img-1.jpg" width="350px" height="250px">
     <div id="container">
     <h3>h3 title</h3>
                <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                    Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
                    augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
                    tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
                    massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
                    eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
                    </div>

<div id="container2">
<img class="img-1" src="img-1.jpg"  width="350px" height="250px">

   <h3 class="">h3 title</h3>
       <p class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                    Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
                    augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
                    tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
                    massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
                    eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
  </div>

CSS：

 body {
  margin-top: 50px;
}

.img-1 {
  border: 1px solid black;
  max-width: 50%;
  margin: 10px 50px;

}

@media only screen and (min-width:768px) {
img {float: left;}
#container2 {clear: left;}
}
相关问题
最新问题