Question

我想让div在屏幕尺寸＆lt; 768中居中，但它没有发生。我使用媒体查询，但它不会发生。我只想让它集中在一起。它应该在调整到col-sm屏幕后发生

HTML

<div class="row  ">
        <div class="message">
            <div class="col-md-3">
                <img src="img/img6.png" width="75px" height="75px" class="img-responsive message-icons">
                Hope for Peace
            </div>
            <div class="col-md-3">
                <img src="img/img7.png" width="75px" height="75px" class="img-responsive message-icons">
                Save The Earth
            </div>
            <div class="col-md-3">
                <img src="img/img8.png" width="75px" height="75px" class="img-responsive message-icons">
                Build The Future
            </div>
            <div class="col-md-3">
                <img src="img/img9.png" width="75px" height="75px" class="img-responsive message-icons">
                Good For Kids
            </div>
        </div>
    </div>

CSS

message{
            font-size: 1.4em;
            margin-top: 2%;
            top: 2%;
        }
        .message-icons{
            display: inline-block;
            padding-right: 2%;
        }

 .message{
            margin: 0 auto !important; 

            float: none !important;
        }
        .message-icons{
            display: inline-block;
            padding-right: 2%;
            width: 20%;
        }

Answer 1

col-md是桌面或笔记本电脑的任何地方，如果你希望它在＃768时居中，是“xs”tan意味着你可以使用，col-xs-10 col-xs-offset-1，所以它的中心看CSS-Bootstrap

Answer 2

看看这个demo

此处的关键是center内部text-center css类

的文字

我希望那就是你在寻找的东西

Bootstrap，如何在屏幕大小＆lt; 768上居中div行

2 个答案: