Question

我真正想要的是根据两种不同的设计来对齐我的图像。一个用于平板电脑（992像素）和一个用于小屏幕。

理想情况下，我希望它们看起来像这样：

这一个： First design

应缩小为： Second design

这只是一个理想的事实，只要红色的（特别的）显示在底部中心，任何形式的对称都会发生。

我在使用Bootstrap的col-xx-y网格格式化让图像在中心对齐时遇到了很大的问题。 text-align: center似乎是让图像集中对齐的唯一方法，这很奇怪。但它非常烦躁，所以如果我改变任何东西，设计就会彻底破坏。

这是我到目前为止所拥有的：

HTML：

<div class="container">
<div class="row centered categories">
    <div class="col-md-12">
        <div class="icon-cont">
            <img src="http://i.imgur.com/ZF9KgVk.png">
            <h4>Title 1</h4>

        </div>
        <div class="icon-cont">
            <img src="http://i.imgur.com/ZF9KgVk.png">
            <h4>Title 2</h4>

        </div>
        <div class="icon-cont">
            <img src="http://i.imgur.com/ZF9KgVk.png">
            <h4>Title 3</h4>

        </div>
        <div class="icon-cont">
            <img src="http://i.imgur.com/ZF9KgVk.png">
            <h4>Title 4</h4>

        </div>
    </div>
    <div class="col-md-12">
        <div class="icon-cont">
            <img src="http://i.imgur.com/ZF9KgVk.png">
            <h4>Title 5</h4>

        </div>
        <div class="icon-cont">
            <img src="http://i.imgur.com/ZF9KgVk.png">
            <h4>Title 6</h4>

        </div>
        <div class="icon-cont">
            <img src="http://i.imgur.com/ZF9KgVk.png">
            <h4>Title 7</h4>

        </div>
    </div>
    <div class="col-lg-12">
        <div class="icon-cont">
            <img src="http://i.imgur.com/ZF9KgVk.png">
            <h4>Special</h4>

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

CSS：

.centered {
  text-align: center
}

.categories {
  position:relative;
  display: inline-block;
  float:left;
}

.icon-cont {
  display: inline-block;
  text-align: center;
  width: 125px;
  margin-left: 25px;
  margin-right: 25px;
}

.icon-cont img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

请参阅fiddle here。

这是这种设计的有效方法吗？我担心我做错事，因为它太烦人了。例如，如果我将col-md-12更改为col-lg-12，则它不会以某些屏幕尺寸为中心（您必须缩小以查看此内容）。

我认为我必须将图标配对较小的cols，但他们只是不能与我合作。

Answer 1

为每个设备分配一列，即

<div class="col-lg-4 col-xs-6">

等等

抱歉，这很短暂

这里有一些东西要读，当我有机会创造一个小提琴时：）

http://getbootstrap.com/examples/grid/

编辑：

你有一个快速的打击，这没有任何CSS工作，只使用内置列中的twitter bootstrap

<body>
    <div class="container">
<div class="row centered categories">
    <div class="col-md-3 col-xs-12">
        <center>
        <div class="icon-cont">
            <img src="http://i.imgur.com/ZF9KgVk.png">
                <h4>Title 1</h4>

        </div>
        </center>
    </div>
    <div class="col-md-3 col-xs-6">
        <center>
        <div class="icon-cont">
            <img src="http://i.imgur.com/ZF9KgVk.png">
                <h4>Title 2</h4>

        </div>
        </center>
    </div>
    <div class="col-md-3 col-xs-6">
        <center>
            <div class="icon-cont">
                <img src="http://i.imgur.com/ZF9KgVk.png">
                        <h4>Title 3</h4>

            </div>
        </center>
    </div>
    <div class="col-md-3 col-xs-6">
        <center>
        <div class="icon-cont">
            <img src="http://i.imgur.com/ZF9KgVk.png">
                <h4>Title 4</h4>

        </div>
        </center>
    </div>
    <div class="col-md-4 col-xs-6">
        <center>
            <div class="icon-cont">
                <img src="http://i.imgur.com/ZF9KgVk.png">
                        <h4>Title 5</h4>

            </div>
        </center>
    </div>
    <div class="col-md-4 col-xs-6">
        <center>
            <div class="icon-cont">
                <img src="http://i.imgur.com/ZF9KgVk.png">
                        <h4>Title 6</h4>

            </div>
        </center>
    </div>
    <div class="col-md-4 col-xs-6">
        <center>
            <div class="icon-cont">
                <img src="http://i.imgur.com/ZF9KgVk.png">
                        <h4>Title 7</h4>

            </div>
        </center>
    </div>
    <div class="col-md-12">
        <center>
            <div class="icon-cont">
                <img src="http://i.imgur.com/ZF9KgVk.png">
                        <h4>Special</h4>

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

如何在Bootstrap中集中和响应地对齐图像？

1 个答案: