Image gallery thumbnail size with Bootstrap 4

debugcn 投稿 Dev

Paula

I have a very simple responsive image gallery with 6 thumbnails only. In large and medium devices it shows perfectly. However, in mobile view, the thumbnails become way too small. If I add padding, the side margins "break" and they are no longer aligned. Is there a way to make them a bit bigger without "breaking" the side margins? I've posted images so it's easier to understand.

In the image below you can see that the side margins are aligned, but the thumbnails are too small.

And below you can see what happens when I add padding. The thumbnails are bigger, but the side margins are no longer aligned.

.container {
  max-width: 98%;
  margin: 0 auto;
}

.image-container {
  background-color: #ffffff;
  padding: 10px;
}

.main-image-container img {
  max-width: 100%;
  height: auto;
}

.thumbnail-image-container img {
  max-width: 100%;
  height: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container mt-4">
  <div class="row">

    <div class="col-lg-7 image-container">
      <div class="row">
        <div class="col-12 main-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
      </div>
      <div class="row pt-2">
        <div class="col-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>


      </div>
    </div>

Shidersz

One solution would be adding the same padding to all col-* classes. Bootstrap have padding classes named p-*. Next example added the p-1 classes to main-image-container and thumbnail-image-container elements.

.container {
  max-width: 98%;
  margin: 0 auto;
}

.image-container {
  background-color: #ffffff;
  padding: 10px;
}

.main-image-container img {
  max-width: 100%;
  height: auto;
}

.thumbnail-image-container img {
  max-width: 100%;
  height: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container mt-4">
  <div class="row">

    <div class="col-lg-7 image-container">

      <div class="row">
        <div class="col-12 p-1 main-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
      </div>

      <div class="row pt-2">
        <div class="col-2 p-1 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-2 p-1 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-2 p-1 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-2 p-1 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-2 p-1 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-2 p-1 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
      </div>

    </div>

  </div>
</div>

A second solution will be splitting the thumbnails into two rows using the right col-* classes. Like on next example:

.container {
  max-width: 98%;
  margin: 0 auto;
}

.image-container {
  background-color: #ffffff;
  padding: 10px;
}

.main-image-container img {
  max-width: 100%;
  height: auto;
}

.thumbnail-image-container img {
  max-width: 100%;
  height: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container mt-4">
  <div class="row">

    <div class="col-lg-7 image-container">

      <div class="row">
        <div class="col-12 main-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
      </div>

      <div class="row pt-1">
        <div class="col-4 col-md-2 mt-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-4 col-md-2 mt-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-4 col-md-2 mt-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-4 col-md-2 mt-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-4 col-md-2 mt-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
        <div class="col-4 col-md-2 mt-2 thumbnail-image-container img-fluid">
          <img src="https://placeholdit.co//i/1280x720?&text=Test">
        </div>
      </div>

    </div>

  </div>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-08-13

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

Image gallery thumbnail size with Bootstrap 4

Image gallery thumbnail size with Bootstrap 4

How to scroll to Next thumbnail image on photo gallery

Bootstrap 4 images thumbnail classes

Image size in nested rows with Bootstrap 4

change default gallery image size on impresspages

Bootstrap image gallery, failing to show starting controls

Using Bootstrap 2.3.2, what is a good method of styling an image gallery

How to increase the size of a thumbnail in QListWidget

Horizontal image view gallery

Opening image in a gallery view

Django Image Grid Gallery

Async Binding Thumbnail Image in UWP

How to replace AVPlayer thumbnail image?

Issue Blueimp gallery Twitter Bootstrap

Responsive card image with fixed height in bootstrap 4

Adding image over parallax (Bootstrap 4)

Image Thumbnail in Web2py: Unable to display the thumbnail

hover Selector not workin on image Gallery

Bootstrap 4: Always display the mobile menu button no matter screen size

How can I change the size of the font in Bootstrap 4 with just CSS?

Getting the next image and previous image from an gallery

Change Image of an ImageButton into an Image from Gallery Android

iOS CoreSpotlight Thumbnail Image from URL

YouTube thumbnail image not loading in android using Glide

jQuery show multiple image thumbnail before upload

Make image File visible in Android Gallery on Lollipop

How to get Image URI from Gallery?

Flutter set image after selecting from gallery

Glide image from gallery to bitmap variable

div that is a link gets shrouded by image gallery