Question

当屏幕缩小到小并使它们并排放置时，如何让我的图片在中心对齐？我尝试使用色谱柱，但它有一个奇怪的偏移量，在需要时它不会向侧面移动或在直列中对齐。这是我的代码：


10 06 02 00 01 70 00 41 80 00 0B 6C 00 00 00 00 07 05 86 00 00 01 4A 0E B1 80 00 12 4F 23 1F C1 40 00 00 70 42 47 65 6F 72 67 65 80 00 00 42 4C 61 77 6E 20 4D 61 69 6E 74 65 6E 61 6E 63 65 01 00

Answer 1

你可以使用@media查询，让你的div有类似＆＃34; margin：auto＆＃34;在某个屏幕大小或全局父div与＆＃34; text-align：center＆＃34;。

不要忘记引导网格项目有一个默认的＆＃34;浮动：左边＆＃34; attribut，也许你必须用@media查询来改变它。

我在上一个项目中使用过它。我不知道我的目标是与你的兼容，但它可以帮助你。

    <div class="container_losange container_losange_mission col-lg-4 col-md-4 col-sm-4 col-xs-8"> //content </div>
<div class="container_losange container_losange_mission float-right col-lg-4 col-md-4 col-sm-4 col-xs-8"> //content </div>
<div class="container_losange container_losange_mission col-lg-4 col-md-4 col-sm-4 col-xs-8"> //content </div>
<div class="clear"></div>
<div class="container_losange container_losange_mission float_none float-right col-lg-4 col-md-4 col-sm-4 col-xs-8"> //content </div>
<div class="container_losange container_losange_mission float_none float-left col-lg-4 col-md-4 col-sm-4 col-xs-8"> //content </div>

然后我在这里有3 + 2个div。最后两个div是页面的中心，因为我做了一些修改：

    .section_mission {
       text-align: center;

       .container_losange_mission {
         display: inline-block;

         &.float_none {
            float: none;
         }
     }

float-right和float-left仅适用于移动视图的特定设计。（有一个＆＃34;交错的＆＃34;结构）似乎不需要明确的div，我也不记得为什么使用它。

/* Extra small devices (Phones (<768px)) */
@media(max-width:767px){
    .section_mission { 
       .container_losange_mission.float-right { float: right !important; }
       .container_losange_mission.float-left { float: left !important; }
    }
}

我不知道我的解释是否对您有用，因为我不确定它是否适用于随机数量的元素..

如果没有，请查看CSS3新功能FLEX： http://the-echoplex.net/flexyboxes/ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html 可以对这类问题有用

如何在引导列中修复奇怪的偏移量

1 个答案: