如何在不同分辨率下沿着設備寬度在同一條線上劃分不同的div？

Question

我有一個項目列表由多個行組成。每行包含3個div：

第一個包含一個標誌。

第二個包含項目的標題，狀態和日期。

第三個包含更多的信息。

我想把3個div放在同一行上，並考慮到設備的不同分辨率的寬度進入頁面的顯示。 index.html：

因此，我在一行中得到了徽標，另一行中得到了另外兩個div。我該如何解決這個問題？

#list_project { 
 
    position: relative; 
 
    top: 120px; 
 
    z-index: 1; 
 
} 
 

 
.project_logo { 
 
    display: block; 
 
    height: 60px; 
 
} 
 

 
.project_title { 
 
    font-size: 18px; 
 
    font-family: "Arial"; 
 
    color: #000000; 
 
    font-weight: bold; 
 
    line-height: 1.2; 
 
} 
 

 
.project_status { 
 
    font-size: 18px; 
 
    font-family: "Arial Round MT Bold"; 
 
    color: #8e8e8e; 
 
    line-height: 1.2; 
 
} 
 

 
.project_date { 
 
    font-size: 18px; 
 
    font-family: "Arial"; 
 
    color: #8e8e8e; 
 
    line-height: 1.2; 
 
} 
 

 
.project_info_1 { 
 
    border-radius: 10px; 
 
    background-color: #e6e1e1; 
 
    height: 63px; 
 
} 
 

 
.project_cost { 
 
    font-size: 16px; 
 
    font-family: "Arial"; 
 
    color: #000000; 
 
    font-weight: bold; 
 
    line-height: 1.2; 
 
} 
 

 
.project_cost_1 { 
 
    font-size: 16px; 
 
    font-family: "Arial"; 
 
    color: #8e8e8e; 
 
    font-weight: bold; 
 
    line-height: 1.2; 
 
}

<div id="list_project"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col col-sm-4 col-md-4 col-lg-4 col-xl-4"> 
 
     <img class="project_logo" src="./logos/logo.png" /> 
 
     </div> 
 
     <div class="col col-sm-4 col-md-4 col-lg-4 col-xl-4"> 
 
     <table> 
 
      <tbody> 
 
      <tr> 
 
       <td class="project_title"> Project 1 </td> 
 
      </tr> 
 
      <tr> 
 
       <td class="project_status">Active</td> 
 
      </tr> 
 
      <tr> 
 
       <td class="project_date">03/2017-05/2018</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </div> 
 
     <div class="col col-sm-4 col-md-4 col-lg-4 col-xl-4"> 
 
     <table class="project_info_1"> 
 
      <tbody> 
 
      <tr> 
 
       <td class="project_cost" name="project_cost">Cost:</td> 
 
       <td class="project_cost_1" name="project_cost_1">140.000k$.</td> 
 
      </tr> 
 
      <tr> 
 
       <td class="project_cost" name="project_delay">Delay:</td> 
 
       <td class="project_cost_1" name="project_delay_1">350 days.</td> 
 
      </tr> 
 
      <tr> 
 
       <td class="project_cost" name="project_load">Load:</td> 
 
       <td class="project_cost_1" name="project_load_1">125 days.</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

都是因爲你有clas="..."，而不是class=".."它不會工作的好第一。因此，這本身不會使它工作

最後，作爲指導"col col-sm-4 col-md-4 col-lg-4 col-xl-4"是不需要的。 您只能使用"col col-sm-4 col-md-4"，因爲如果您知道我的意思是col-md-4，如果您進行更改，則任何分辨率更大的將使用找到的最後一個「最高跨度」，因此col-md-4對於lg，xl，xxl將爲4好。

你只添加col-lg等，如果有是不同跨度的大小