Question

<div class='img-thumbnail'>
    <img src="a.jpg" class='img-fluid'>
</div>

这是我在带有Bootstrap 4 CSS的html文件中拥有的内容。该图像位于一个漂亮的盒子中。当我添加h4标题时，该标题也位于框内的图像下方。

<div class='img-thumbnail'>
    <img src="a.jpg" class='img-fluid'>
    <h4>filename:a.jpg</h4>
</div>

但是当我使用bootstrap .float-right类或style='float:right'将其右移时，该元素将移到右侧，但它来自缩略图。请帮忙。

<div class='img-thumbnail'>
    <img src="a.jpg" class='img-fluid'>
    <h4 class='float-right'>filename:a.jpg</h4>
</div>

在引导程序3中，使用了.pull-right类，并将其正确放置在缩略图框内的右侧。

完整代码

<div class='container'>
 <div class='row'>
  <div class='col-3'>
    <p class='lead'>LOL</p>
    <ul class='list-group'>
      <li class='list-group-item active'>Something 1</li>
      <li class='list-group-item'>Something 2</li>
      <li class='list-group-item'>Something 3</li>
    </ul>
  </div>
  <div class='col-9'>
    <div class='img-thumbnail'>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/2000px-Google_%22G%22_Logo.svg.png" class='img-fluid'>
      <h4 class='float-right'>$9.99</h4>
    </div>
  </div>
 </div>
</div>

Answer 1

看看img-thumbnail从Bootstrap 3.x到4.x的不同：

Bootstrap 4.x：

.img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
}

Bootstrap 3.x：

.img-thumbnail {
  display: inline-block;
  max-width: 100%;
  height: auto;
  padding: 4px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}

区别在于3.x使用display:inline-block。因此，要在4.x中创建相同的效果，您只需将d-inline-block添加到img-thumbnail ...

   <div class='img-thumbnail d-inline-block'>
      <img src=".." class='img-fluid'>
      <h4 class='float-right'>$9.99</h4>
   </div>

https://www.codeply.com/go/r75rriVhX3

Answer 2

只需添加一个img缩略图类的d-inline-block类。

这是代码。

    import { Component } from ‘@angular/core’;
    import { Platform } from ‘ionic-angular’;
    import { StatusBar } from ‘@ionic-native/status-bar’;
    import { SplashScreen } from ‘@ionic-native/splash-screen’;

    import { ArchivedTodosPage } from “…/pages/archived-todos/archived-todos”;

    import { HomePage } from ‘…/pages/home/home’;
    @Component({
    templateUrl: ‘app.html’
    })
    export class MyApp {
    rootPage:any = HomePage;

    constructor(platform: Platform, statusBar: StatusBar, splashScreen: 
    SplashScreen) {
    platform.ready().then(() => {
    // Okay, so the platform is ready and our plugins are available.
    // Here you can do any higher level native things you might need.
    statusBar.styleDefault();
    splashScreen.hide();
    });
    }
    }

Bootstrap 4缩略图内的浮动右元素与Bootstrap 3的工作原理不同

2 个答案: