Question

通过使用Bootstrap，我正在尝试在其右侧创建3行图像和文本。如果使用移动（小型）设备进行浏览，我希望每行只有一个图像，右侧有文本。图像可以是不同的大小，但我希望它们以相同的大小显示（现在是内联样式）。目前它在大型设备上看起来还不错，但是当缩小视口时，包装就会关闭。而不是所有的列在一个点上彼此相遇，他们错误地包装。如果我删除图像上的“向左拉”，它们会正确包装，但文本会在图像下方。我怎样才能在这里做我想做的事？

我当前的HTML：

    <div class="row">
  <div class="col-sm-4">
    <img src="http://lorempixel.com/300/200/" class="pull-left img-rounded" style="margin-right:10px;width:100px;height:100px;">
    <h3>Header 1</h3>
    <p>Text 1 is cool text</p>
  </div>
  <div class="col-sm-4">
    <img src="http://lorempixel.com/400/200/" class="pull-left img-rounded" style="margin-right:10px;width:100px;height:100px;">
    <h3>Header 2</h3>
    <p>Text 2 is also cool text</p>
  </div>
    <div class="col-sm-4">
    <img src="http://lorempixel.com/800/800/" class="pull-left img-rounded" style="margin-right:10px;width:100px;height:100px;">
    <h3>Header 3</h3>
    <p>Text 3 is also very cool text</p>
  </div>
</div>

Fiddle

Answer 1

这是你要找的吗？

<div class="row">
   <div class="col-md-4 col-sm-12">
      <img src="http://lorempixel.com/300/200/" class="img-rounded col-md-2 col-sm-6" style="margin-right:10px;width:100px;height:100px;">
      <div class="col-sm-6">
         <h3>Header 1</h3>
         <p>Text 1 is cool text</p>
      </div>   
   </div>
   <div class="col-md-4 col-sm-12">
     <img src="http://lorempixel.com/400/200/" class="img-rounded col-md-2 col-sm-6" style="margin-right:10px;width:100px;height:100px;">
     <div class="col-sm-6">
          <h3>Header 2</h3>
          <p>Text 2 is also cool text</p>
     </div>
   </div>
   <div class="col-md-4 col-sm-12">
      <img src="http://lorempixel.com/800/800/" class="img-rounded col-md-2 col-sm-6" style="margin-right:10px;width:100px;height:100px;">
      <div class="col-sm-6">
        <h3>Header 3</h3>
        <p>Text 3 is also very cool text</p>
      </div>
   </div>
</div>

Answer 2

似乎我必须将我的列包装在另一个类clearfix：

中

<canvas id="chart-area-service_hours"></canvas>

<button class="button btn btn-md btn-block btn-default" id="update-
statistic" style="width: 50%;margin: 0 auto;">Обнавить</button>

var randomHours = function() {
    return Math.round(Math.random() * 12);
};

var service_hours = {
    type: 'pie',
    data: {
        datasets: [{
            data: [
                {% for service in current_user.services %}
                    [
                        randomHours(),
                    ],
                {% endfor %}

            ],
            backgroundColor: [
                {% for service in current_user.services %}
                    '#00FFFF',
                    window.chartColors.purple,
                    '#ff9900',
                    window.chartColors.grey,
                    window.chartColors.brown,
                    // window.chartColors.green,
                    // window.chartColors.yellow,
                    // window.chartColors.purple,
                {% endfor %}
            ],
            label: 'Распределение рабочих часов по услугам'
        }],
        labels: [
            {% for service in current_user.services %} 
                "{{service.title}}",
            {% endfor %}
        ]
    },
    options: {
        responsive: true,

    }
};

    var ctx = document.getElementById("chart-area-service_hours").getContext("2d");
    window.myPie = new Chart(ctx, service_hours);

document.getElementById('update-statistic').addEventListener('click', function() {
    all_brnoi_line.data.datasets.forEach(function(dataset) {
        dataset.data = dataset.data.map(function() {
            return randomScalingFactor();
        });
    });
    $("#chart-area-1").hide().html('<canvas id="chart-area-1" class="all-broni">').fadeIn('fast');
    window.myPie.update();
});

New fiddle

Answer 3

如果您不是在寻找引导列断点并仍在寻找一些东西，请尝试使用引导媒体断点。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

  <div class="row">
    <div class="col-sm-4 row1" >
      <img src="http://lorempixel.com/300/200/" class="pull-left img-rounded" style="margin-right:10px;width:100px;height:100px;">
      <h3>Header 1</h3>
      <p>Text 1 is cool text</p>
    </div>
    <div class="col-sm-4 row2">
      <img src="http://lorempixel.com/400/200/" class="pull-left img-rounded" style="margin-right:10px;width:100px;height:100px;">
      <h3>Header 2</h3>
      <p>Text 2 is also cool text</p>
    </div>
      <div class="col-sm-4 row3">
      <img src="http://lorempixel.com/800/800/" class="pull-left img-rounded" style="margin-right:10px;width:100px;height:100px;">
      <h3>Header 3</h3>
      <p>Text 3 is also very cool text</p>
    </div>
  </div>

</body>
</html>

CSS使用媒体断点：
使用max-width

<style type="text/css">

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 768px) {
        /* YOUR CODE HERE|EXAMPLE CODES*/
       body{
        background-color: black;
       }
       .row2{
          display: none;
       }
       .row3{
          display:none;
       }

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 992px) {
        /* YOUR CODE HERE|EXAMPLE CODES*/
       body{
        background-color: blue;
       }
       .row3{
          display:none;
       }
    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 1200px) {
         /* YOUR CODE HERE|EXAMPLE CODES| SET HERE WHAT YOU NEED TO HIDE OR ANYTHING*/
       body{
        background-color: green;
       }
    }

    /* Large Devices, Wide Screens 
      USE DEFAULT
    */

</style>

使用min-width

<style type="text/css">

        /* Extra Small Devices, Phones */ 
        @media only screen and (min-width : 480px) {
            /* YOUR CODE HERE|EXAMPLE CODES*/
           body{
            background-color: black;
           }

        }

        /* Small Devices, Tablets */
        @media only screen and (min-width : 768px) {
            /* YOUR CODE HERE|EXAMPLE CODES*/
           body{
            background-color: blue;
           }
        }

        /* Medium Devices, Desktops */
        @media only screen and (min-width : 992px) {
             /* YOUR CODE HERE|EXAMPLE CODES| SET HERE WHAT YOU NEED TO HIDE OR ANYTHING*/
           body{
            background-color: green;
           }
        }

        /* Large Devices, Wide Screens */
        @media only screen and (min-width : 1200px) {
            /* YOUR CODE HERE*/
        }
    </style>

引导图像和文本在列内对齐

3 个答案: