Bootstrap 响应式:如何修复非响应式元素? [英] Bootstrap responsive: How to fix a non-responsive element?

查看：52
本文介绍了Bootstrap 响应式:如何修复非响应式元素?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在 twitter bootstrap 中启用了响应功能，使用嵌套的流体网格.在小型移动设备上查看时，每个跨度都是堆叠的.但是，我想保持主要内容"未堆叠并以水平布局显示.我试过 display:inline-block;和 min-width 但两者都不起作用.有什么建议吗?谢谢.

<div class="row-fluid"><div class="span9" id="maincontent"><div class="container-fluid"><div class="row-fluid"><div class="span2">2</div><div class="span8">8</div><div class="span2">2</div>

<div class="span3" id="sidebar"><!-- 侧边栏元素放在这里-->

解决方案

尝试一下:

<div class="row-fluid"><div class="span9" id="maincontent"><div class="row"><div class="span2" style="float: left; width: 15%;">2</div><div class="span8" style="float: left; width: 65%;">8</div><div class="span2" style="float: left; width: 15%;">2</div>

<div class="span3" id="sidebar"><!-- 侧边栏元素放在这里-->侧边栏

您需要调整和使用 % 以满足您的需要，并最终将这些内联样式移到样式表中.您可能需要对它们使用 !important 以防止它们被流畅的 twitter bootstrap 类覆盖.它们与您的设置叠加的原因是尽管您使用了非流体容器/行类，但流体样式接管了，并将它们更改为 float: none, width: 100%;显示:块 div.

I've enabled the responsive feature in twitter bootstrap, using nested fluid grid. When viewed on small mobile, every single spans are stacked. However, I'd like to keep the "maincontent" unstacked and shown in horizontal layout. I've tried display:inline-block; and min-width but both didn't work. Any recommendations? Thank you.

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span9" id="maincontent">
      <div class="container-fluid">
       <div class="row-fluid">
         <div class="span2">2</div>
         <div class="span8">8</div>
         <div class="span2">2</div>
       </div>
      </div>
    </div>
    <div class="span3" id="sidebar">
      <!-- sidebar elements go here -->
    </div>
  </div>
</div>

解决方案

Give something like this a shot:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span9" id="maincontent">
            <div class="row">
                <div class="span2" style="float: left; width: 15%;">2</div>
                <div class="span8" style="float: left; width: 65%;">8</div>
                <div class="span2" style="float: left; width: 15%;">2</div>
            </div>
        </div>
        <div class="span3" id="sidebar">
            <!-- sidebar elements go here -->
            sidebar
        </div>
    </div>
</div>

You'll want to tweak and play with the % to fit your needs, and eventually move those inline styles out into a stylesheet. You may need to slap !important on them to keep them from being overriden by the fluid twitter bootstrap classes. The reason they were stacking with your setup is that the fluid styles took over despite the non-fluid container/row classes you used, and changed them to float: none, width: 100%; display: block divs.

这篇关于Bootstrap 响应式:如何修复非响应式元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆