布局使用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>