<分区>
我是 Bootstrap 的新手,我正在努力完成以下任务:
(左栏 - 较大)
标题
标题 2
标题图片标题图片
标题
地址
(右栏 - 较小)
标题
段落
列表项
我的问题是如何防止右列折叠到左下方?我试过设置高度,但这当然是暂时的,甚至不能正常工作。当我添加更多内容时,右栏立即折叠到左下方:(。我完全迷路了。几个小时以来我一直在尝试不同的东西。一定有一个我不知道的简单修复方法?
这是我目前所拥有的:
左栏:
<div class='information'>
<div class='container'>
<div class='row'>
<div class='col-md-9'>
<div id='schedule'>
<h2>Schedule</h2>
<h3>Sunday</h3>
<div class='schedule-inner'>
<div class='schedule-heading'>
<div class="media">
<h5 class="media-heading pull-left ">Location 1</h5>
<img class="media-object pull-left img-responsive" src="img/arrow.png" alt="..." />
<h5 class="media-heading pull-left">Location 2</h5>
<img class="media-object pull-left img-responsive" src="img/arrow.png" alt="..." />
<h5 class="media-heading pull-left">Location 3</h5>
</div>
</div>
<div class='schedule-location'>
<div class='col-md-3'>
<h4>8:00am</h4>
<div class='schedule-address'>
<address>
xxxxx<br>
xxxxx<br>
<span class='schedule-location-name'>(Name of location)</span>
</address>
</div>
</div>
</div>
</div>
</div>
</div>
右栏:
<div class='pricing'>
<div class='col-md-3'>
<h3>Pricing</h3>
<p>Lorem ispum</p>
<ul>
<li class='icon-sprite sprite-wifi'>Wifi internet</li>
<li class='icon-sprite sprite-charger'>Charger</li>
<li class='icon-sprite sprite-battery'>Charger</li>
</ul>
</div>
</div>