Question

您好我正在尝试使用bootstrap 4制作像https://www.pexels.com/这样的图片库，但是bootstrap并没有像我想要的那样排列图片。

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-4 col-md-6 col-sm-12">
      <img src="imgsource" alt="">
    </div>
  </div>
</div>

CSS

img{
   width: 100%;
}

我的结果 enter image description here

Answer 1

export const postTweet = (body) => {
  console.log('OK')
  return dispatch => {
    console.log('NO LOG')
  }
}

Answer 2

我从没有尝试过使用引导程序，但是我自己是使用flex box构建的。试试下面的代码：

html：

<div class="photos" id="photoContainer">
  <div class="photos__columns">
    <div class="holders" id="0">

    </div>
  </div>
  <div class="photos__columns">
    <div class="holders" id="1">

    </div>
  </div>
  <div class="photos__columns">
    <div class="holders" id="2">

    </div>
  </div>
</div>

scss：

.photos {
  display: flex;
  max-width: 100%;
  &__columns {
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    margin-right: 20px;
  }

  .holders {
    display: flex;
    flex-direction: column;
    .images {
      width: 100%;
      margin-bottom: 20px;
      height: auto;
    }
  }
}

Click to see the demo in my codepen

图像库，如https://www.pexels.com/，带有bootstrap 4

2 个答案: