Question

我有一个包含3列行的布局。每列有3个垂直列出的项目。我正在使用Bootstrap。

  <div class="row">
    <div class="col-sm-4 ">
      <img class="img-responsive" src="http://placekitten.com/g/300/200">
      <h3>SOMETHING</h3>
      <div class="url"> https://something.com </div>
    </div>
    <div class="col-sm-4">
      <img class="img-responsive" src="http://placekitten.com/g/300/200">
      <h3>NOTHING</h3>
      <div class="url"> https://nothing.com/</div>
    </div>
    <div class="col-sm-4 appcontainer">
      <img class="img-responsive" src="http://placekitten.com/g/300/200">
      <h3>EVERYTHING</h3>
      <div class="url"> https://everything.com/</div>
    </div>
  </div>

当行以767像素下降至约400像素时，布局感觉不对，因为各列不能很好地填充空间。在这种情况下，我希望它显示左侧的图像和右侧的标题和网址，就像它是这样的..

<div class="col-sm-4 ">
    <div class="row">
        <div class="col-xs-6">
            <img class="img-responsive" src="http://placekitten.com/g/300/200">
        </div>
        <div class="col-xs-6">
          <h3>SOMETHING</h3>
          <div class="url"> https://something.com </div>
        </div>
    </div>
</div>

这可以通过CSS和媒体查询来完成吗？或者我是否需要深入研究一些JavaScript？

我觉得应该可以使用显示器设置一些内容，但我还没有找到一个有用的神奇组合。

Answer 1

请检查结果：

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

@media (max-width: 400px) {
  .col-xs-6 {
    width: 100%;
  }
}

.row {
  margin-top: 15px;
}

＆＃13;

<div class="container">
  <div class="row">
    
    <div class="col-xs-12 col-sm-4">
      <div class="row">
        <div class="col-xs-6 col-sm-12">
          <img class="img-responsive" src="http://placekitten.com/g/300/200">
        </div>
        <div class="col-xs-6 col-sm-12">
          <h3>SOMETHING</h3>
          <div class="url"> https://something.com </div>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-4">
      <div class="row">
        <div class="col-xs-6 col-sm-12">
          <img class="img-responsive" src="http://placekitten.com/g/300/200">
        </div>
        <div class="col-xs-6 col-sm-12">
          <h3>NOTHING</h3>
          <div class="url"> https://nothing.com </div>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-4">
      <div class="row">
        <div class="col-xs-6 col-sm-12">
          <img class="img-responsive" src="http://placekitten.com/g/300/200">
        </div>
        <div class="col-xs-6 col-sm-12">
          <h3>EVERYTHING</h3>
          <div class="url"> https://everything.com </div>
        </div>
      </div>
    </div>
    
  </div>
</div>

＆＃13;

使用引导程序 - 将列更改为行

1 个答案: