自舉

Question

我試圖把我的項目，所以最後他們看起來像下面的CSS佈局的項目（黑線在那裏只是爲了告訴你，這是出於三個模塊製造）：

我已經嘗試了很多東西。舉例來說，我曾嘗試使用panel類作爲魅力工作的兩個正確的項目;但問題與圖標有關......我根本無法使div元素填充100％的高度，並且我的圖標始終與頂部對齊。

我遇到的另一個問題是，我無法弄清楚如何設置我的網格佈局，當我有更多的項目。基本上，在最後我想有這樣的事情在一排：

正如你可以看到（我這樣一個小圖片道歉），我想有三組在這些項目行，他們也必須在右邊對齊。當我開始使用網格系統時，我無法正確地將三個元素適合放到該行（不提及我的圖標的垂直對齊），但是文本也不合適。

在這個問題上的任何幫助將不勝感激。

Answer 1

---

在我看來，你在一開始給的例子將不同於編碼你如何將它展現在底部。

您可以使用"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: 

    } 
} 

Answer 2

我設法用下面的代碼來做到這一點：

<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; 
}