佈局使用Bootstrap和Div

Question

我想建立一個公司的內聯網頁面，「網格」風格的佈局。在過去，我使用過表格，但是我知道這些在使用佈局時非常成問題，因此我正在嘗試使用引導程序和Divs構建佈局 - 但是它證明是有問題的。

最後我嘗試在頁面的右上角實現的是：

但是什麼我實際上呈現如下：

忽略事實上，天氣數據有點擴大了，我正在努力獲得理想的結果，並且我真的很想回到表格來讓這個東西排隊！

這裏是我使用的主模板頁面上的代碼：

<div class="row"> 
    <div class="col-sm-3">.col-sm-4</div> 
    <div class="col-sm-4">.col-sm-4</div> 
    <div class="col-sm-5"> 
     <img src="~/Content/Images/companylogo.png" style="float: right; padding-right: 15px; padding-bottom:25px;"/> 
     <div style="padding-top:25px; border-bottom: 1px solid black;"> 
      <div id="weatherDiv" style="float:left;"></div> 
      <div id="dateDiv" style="float:right; padding-right:10px; vertical-align: bottom;"></div> 
     </div> 
    </div> 
</div> 

然後在網頁加載時，兩個div（weatherDiv & dateDiv）被填充使用AJAX：

WeatherDiv ：

<div id="weatherDiv" style="float:left;"> 

<link href="/Content/css/weather-icons.css" rel="stylesheet"> 
<link href="/Content/css/weather-icons-wind.css" rel="stylesheet"> 
<div> 
    <ul style="list-style: none; margin-left: 0px; padding-left:0px;"> 
      <li>Brisbane - Hot and sunny - 32c <i class="wi wi-day-sunny"></i></li> 
      <li>Melbourne - Early shower or two - 17c <i class="wi wi-showers"></i></li> 
    </ul> 
</div> 


</div> 

DateDiv：

<div id="dateDiv" style="float:right; padding-right:10px; vertical-align: bottom;"> 

<h4>Friday, 20 November 2015</h4> 
</div> 

我完全理解我對CSS的使用，Bootstrap & Divs幾乎是可笑的，但上面是幾個小時的嘗試和嘗試的結果！

任何幫助，非常感謝。

Answer 1

很難確切地確定您希望此佈局在移動設備上如何工作。但這裏有一個我創建的jsfiddle，可以提供幫助。 https://jsfiddle.net/2dqqajs1/

body { 
 
    min-width: 320px;  
 
} 
 

 
.text-right img{ 
 
    display: inline-block; 
 
} 
 

 
/*extra small screens only*/ 
 
@media (max-width: 767px) { 
 
    #weatherDiv{ 
 
    text-align: right; 
 
    } 
 
} 
 

 
hr { 
 
    margin: 0; 
 
    border-top: solid 2px #e0e0e0; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-4"></div> 
 
     <div class="col-xs-8"> 
 
      <div class="row"> 
 
       <div class="col-xs-12 text-right"> 
 
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=CompanyLogo&w=400&h=100" class="img-responsive" /> 
 
       </div> 
 
      </div> 
 
      <div class="row"> 
 
       <div id="dateDiv" class="col-xs-12 col-sm-5 col-sm-push-7 text-right"> 
 
        <h4>Friday</span>, 20 Nov<span class="hidden-xs hidden-sm">ember</span> 2015</h4> 
 
       </div>   
 
       <div id="weatherDiv" class="col-xs-12 col-sm-7 col-sm-pull-5"> 
 
        <ul style="list-style: none; margin-left: 0px; padding-left:0px;"> 
 
         <li>Bris<span class="hidden-sm">bane</span> <span class="hidden-xs">- Hot and sunny </span>- 32c <i class="fa fa-sun-o"></i></li> 
 
         <li>Melb<span class="hidden-sm">ourne</span> <span class="hidden-xs">- Early shower or two </span>- 17c <i class="fa fa-cloud"></i></li> 
 
        </ul>   
 
       </div> 
 
       <div class="col-xs-12"><hr/></div> 
 
      </div>  
 
     </div> 
 
    </div>      
 
</div>