Question

大家好我正在使用Bootstrap 4，并且列中的图像如下所示：

 <div className='col-xs-12 col-sm-5 col-md-4 col-lg-3'>
     <img src={movie.Poster} className='movie-poster img-fluid mx-auto d-block' />
 </div>

我的问题是，当屏幕尺寸激活col-xs-12和col-sm-5时，我希望将图像置于上面，但是当屏幕较大时，例如col-md-4或col-lg-3，我不要我想让图像居中。在某些屏幕尺寸下有没有办法有条件地做事？

提前致谢。

Answer 1

是。您应该遵循以下表示法：https://getbootstrap.com/docs/4.0/utilities/spacing/#notation

在您的情况下，您应该使用：mx-auto mx-lg-0

#include <stdio.h>


long long int factorial(long long int num)
{
    long long int result = 1;

    for(int i = 1 ; i <= num ; i ++)
        result *= i;

    return result;  
}



long long int binomial(long long int n, long long int k)
{
    return factorial(n) / (factorial(k) * factorial(n - k));
}

long long int bell(int n)
{
    if(!n)  
        return 1;


    long long int sum = 0;

    for(int k = 0; k < n; k++)
        sum += binomial(n-1, k) * bell(k);

    return sum;
}

int main()
{
    int restart = 1, userNum;

    while(restart)
    {
        printf("Enter the value of n:");
        scanf("%d",&userNum);

        for(int i = 1; i <= userNum; i++)
            printf("Bell Number [%d] = %lli\n", i, bell(i-1));

        printf("Restart program? (1 = yes : 0 = no) ");
        scanf("%d", &restart);
    }

}

<img src={movie.Poster} class='movie-poster img-fluid mx-auto mx-lg-0 d-block' />：对于 xs ， sm 和 md ，左边和右边都有自动边距。

mx-auto：对于 lg 和 xl ，保留边距为0.如果需要，您也可以使用ml-lg-0。

Answer 2

是的，mx-auto类是响应式的。因此，如果您使用mx-md-auto，则只会从中（md）屏幕开始应用该类。

但是，这样做不会对您的情况产生任何影响，因为您也在使用img-fluid类。这将用图像填充整个列。换句话说，尝试使图像居中是毫无意义的，同时具有自动拉伸图像以填充列的整个宽度的类。

这是一个代码段，显示它有效（点击下面的“运行代码段”并展开到整页）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-5 col-md-4 col-lg-3 bg-secondary">
           <p>Lorem ipsum.</p>
            <img src="https://placeimg.com/50/50/animals" class="movie-poster img-fluid mx-md-auto d-block" />
        </div>
    </div>
</div>

有没有办法在Bootstrap 4中以不同的列大小有条件地居中图像？

2 个答案: