html - 使用 Bootstrap 和 Div 进行布局

Question

我正在尝试构建一个具有“网格”样式布局的公司内部网页。过去我使用过表格，但我知道这些在用于布局时会出现严重问题，因此我尝试使用 bootstrap 和 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>

然后在页面加载时，使用 AJAX 填充两个 DIV(weatherDiv 和 dateDiv):

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>

日期分区:

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