Question

我在joomla中使用twitter引导带，我遇到了一个小问题，我的左栏在平板电脑上消失了（它的意思如何），但是当它确实消失时内容不会消耗左列的空间平板电脑上有这个奇怪的差距...

我该如何解决这个问题？ JSFIDDLE

这是HTML：

<div class="row-fluid">
<!--LEFT-->
    <div class="span3 pull-left left_bar visible-desktop">
         It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
<!--LEFT-->

<!--CONTENT-->
    <div class="span6 content pull-left">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
     </div>
<!--CONTENT-->    

<!--RIGHT-->
    <div class="span3 pull-right right_bar hidden-phone">
        t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
    </div>
<!--RIGHT-->
</div>

任何帮助非常感谢。

Answer 1

问题是因为class =＆＃34; visible-desktop＆＃34; 。使用此类，左侧栏将始终在桌面上可见，并将隐藏在平板电脑和移动设备上。

使用下面的媒体查询排列列，以解析它们之间的空白区域。

@media (min-width: 768px) and (max-width: 979px) {
    .row-fluid .right_bar {
     width: 44.928%;

  }
}

这是一个jsfiddle演示columns rearrage

当其他不再可见时，Bootstrap让span消耗空间

1 个答案: