自举 - 源码之家

问题描述：

我试图把我的项目，所以最后他们看起来像下面的CSS布局的项目（黑线在那里只是为了告诉你，这是出于三个模块制造）：自举

我已经尝试了很多东西。举例来说，我曾尝试使用panel类作为魅力工作的两个正确的项目;但问题与图标有关......我根本无法使div元素填充100％的高度，并且我的图标始终与顶部对齐。

我遇到的另一个问题是，我无法弄清楚如何设置我的网格布局，当我有更多的项目。基本上，在最后我想有这样的事情在一排：

正如你可以看到（我这样一个小图片道歉），我想有三组在这些项目行，他们也必须在右边对齐。当我开始使用网格系统时，我无法正确地将三个元素适合放到该行（不提及我的图标的垂直对齐），但是文本也不合适。

在这个问题上的任何帮助将不胜感激。

答

在我看来，你在一开始给的例子将不同于编码你如何将它展现在底部。

您可以使用"clearfix" or "clear float"删除栅格项目之间的间距或防止奇怪的包装。在我的第一个示例中，我隐藏了另外两列，以便您可以看到它们将按照您在第一个示例中指定的顺序排列。网格间距的

例子：

<style> 
[class*="col-"] { 
    background-color: rgba(86, 61, 124, 0.15); 
    border: 1px solid rgba(86, 61, 124, 0.2); 
    padding-bottom: 15px; 
    padding-top: 15px; 
} 
h1{ 
    text-align: center; 
} 
</style> 

<div class="container"> 
    <div class="row clearfix"> 
     <div class="col-xs-6 col-sm-3" style="height: 150px;"> 
      .col-xs-6 .col-sm-3 
      <br> 
      Resize your viewport or check it out on your phone for an example. 
     </div> 
     <div class="col-xs-6 col-sm-3" style="margin-top: 22px;margin-bottom: -40px;">.col-xs-6 .col-sm-3</div> 
     <div class="col-xs-6 col-sm-3" style="visibility: hidden">.col-xs-6 .col-sm-3</div> 

     <div class="clearfix visible-xs"></div> 
     <div class="col-xs-6 col-sm-3" style="visibility: hidden">.col-xs-6 .col-sm-3</div> 

     <div class="col-xs-6 col-sm-3" style="margin-top: 22px;">.col-xs-6 .col-sm-3</div> 
    </div> 
</div>

关于你的第二例图，这将是你的最终解决方案，你其实不用排队它作为第二个盒子。这只是它自己的一个不同的元素。我会做这样的：

== 电网解决方案瓦特/多个CSS元素 ==

自定义CSS

<style> 
.margin-bottom-5, .margin-bottom-10, .margin-bottom-15, .margin-bottom-20, .margin-bottom-25, .margin-bottom-30, .margin-bottom-35, .margin-bottom-40, .margin-bottom-45, .margin-bottom-50, .margin-bottom-55, .margin-bottom-60, .margin-bottom-100 { 
    clear: both; 
} 
* { 
    border-radius: 0; 
} 
.content-boxes-in-v4 { 
    overflow: hidden; 
    padding: 0 10px; 
} 
.content-boxes-v4 h2 { 
    color: #555; 
    font-size: 16px; 
    font-weight: bold; 
    text-transform: uppercase; 
    margin-top: -10px; 
    margin-bottom: 0px; 
} 
.content-boxes-v4 h3{ 
    color: #72c02c; 
    font-size: 14px; 
    font-weight: bold; 
    text-transform: uppercase; 
    text-align: right; 
    margin-top: 0px; 

} 
.content-boxes-v4 a { 
    color: #72c02c; 
    font-size: 11px; 
    font-weight: bold; 
    text-transform: uppercase; 
} 
.box{ 
    margin-top: 50px; 
    width: 900px; 
    margin-left: auto; 
    margin-right: auto; 

} 
.icon-lrg{ 
    align: left; 
    font-size: 26px; 
    vertical-align: middle; 
    text-align: left; 
    margin-right: 5px; 
    margin-top: 15px; 
    color: #72c02c; 
} 
</style>

HTML

<div class="box"> 
    <div class="row content-boxes-v4 content-boxes-v4-sm margin-bottom-30"> 
    <div class="col-md-4 md-margin-bottom-40"> 
     <span class="pull-left glyphicon glyphicon-tags icon-lrg"></span> 
     <div class="content-boxes-in-v4"> 
     <h3>70,423</h3> 
     <h2># of Orders Processed by Individual Owners</h2> 
     <a href="#">Learn More</a> 
    </div> 
    </div> 
    <div class="col-md-4 md-margin-bottom-40"> 
    <span class="pull-left glyphicon glyphicon-time icon-lrg"></span> 
    <div class="content-boxes-in-v4"> 
     <h3>128,444</h3> 
     <h2># of Orders Received By Amazon Fulfillment</h2> 
     <a href="#">Learn More</a> 
    </div> 
    </div> 
    <div class="col-md-4 md-margin-bottom-40"> 
    <span class="pull-left glyphicon glyphicon-shopping-cart icon-lrg"> 
    </span> 
    <div class="content-boxes-in-v4"> 
    <h3>123,423</h3> 
    <h2># of Orders shipped from eBay from member stores</h2> 
    <a href="#">Learn More</a> 
    </div> 
</div> 
</div> 
</div>

编辑：如果你想使它完全响应，并没有比屏幕尺寸更广泛，添加下面的部分到您的CSS或样式标签。

响应CSS

@media screen and (max-width: 1100px){ 
    .col-md-4{ 
     width: 100%; 
     max-width: 500px; 
     margin-left: auto; 
     margin-right: auto; 
    } 
    .box { 
     padding-left: 10px; 
     padding-right: 10px; 
     width: 100%; 
     margin-left: auto; 
     margin-right: auto; 
     align: center; 
    } 
    .content-boxes-in-v4 { 
     max-width: 800px; 
     text-align: 

    } 
}

我喜欢你的解决方案比我好得多。有一件事我注意到了，当我复制你的代码时 - 当我将窗口调整为更小的宽度时，这三个元素在第一行之下进行排列，但它们的宽度远大于窗口的宽度（我必须滚动到有权查看数字）。你也有同样的行为？ –

你指的是第一个还是第二个？ –

第二个与这三个组件。难道是因为'box'类硬编码为900px？ –

答

我设法用下面的代码来做到这一点：

<div class="row"> 
     <div class="col-md-12"> 
      <div class="col-md-4 Component_Statistics"> 
       <div class="col-md-2"> 
        <i class="fa fa-mobile fa-4x"></i> 
       </div> 
       <div class="col-md-10"> 
        <div class="panel panel-default no-margin-bottom"> 
         <div class="panel-body"> 
          55,215 min 
         </div> 
         <div class="panel-heading"> 
          <p>Odpracovany cas</p> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div>

和CSS：

.Component_Statistics { 
    display:flex; 
    align-items:center; 
    margin-top:10px; 
    margin-bottom:10px; 
} 

.no-margin-bottom { 
    margin-bottom:0; 
}

自举

相关推荐