引导程序中的固定内容，无响应

debugcn 发表于 Dev

克里斯·理查兹（Chris Richards）

我知道一个奇怪的问题，因为这违背了引导程序的全部目的及其响应能力，但这是我必须要做的事情.....

我想要一个3列的布局，例如，左列和右列都可以是col-xs-1，而中间列col-xs-10则是它的主要内容区域，但是我们可以使用两边的列向前走。

显然，这很容易创建，但是，我们被要求使中心列无响应.....

长话短说，我需要中心列及其中的所有元素（例如导航，操作栏以及内容）完全静态并避免调整大小。

有任何想法吗？我尝试过为列设置固定为等许多建议，但似乎无济于事。

干杯

      <div class="container">

    <div class="navbar-header">
      <!-- The mobile navbar-toggle button can be safely removed since you do not need it in a non-responsive implementation -->
      <a class="navbar-brand" href="#">
                    <xp:image url="/NewLogoWhiteText.gif"
                        id="image1">
                    </xp:image>
                </a>
    </div>


    <!-- Note that the .navbar-collapse and .collapse classes have been removed from the #navbar -->
    <div id="navbar">
      <p class="navbar-text">
                    <strong>
                        <xp:text escape="true" id="computedField2"
                            value="#{javascript:return database.getTitle()}">
                        </xp:text>
                    </strong>
                </p>
                <ul class="nav navbar-nav navbar-right">

                <li>

                    <p class="navbar-text navbar-left">
                        <span class="glyphicon glyphicon-user"
                            aria-hidden="true">
                        </span>
                        <xp:text escape="true"
                            id="computedField1">
                            <xp:this.value><![CDATA[#{javascript:" " + @Name("[CN]", @UserName());}]]></xp:this.value>
                        </xp:text>
                    </p>

                </li>   
                    <li>
                        <xp:button value="Personal" id="button2"
                            styleClass="btn btn-default navbar-btn btn-xs">
                        </xp:button>
                    </li>
                    <li>
                        <xp:button value="Admin" id="button1"
                            styleClass="btn btn-default navbar-btn btn-xs">
                        </xp:button>
                    </li>
                    <li>
                        <xp:button value="System" id="button3"
                            styleClass="btn btn-default navbar-btn btn-xs">
                        </xp:button>
                    </li>
                    <li>
                        <xp:button value="Help?" id="button4"
                            styleClass="btn btn-default navbar-btn btn-xs">
                        </xp:button>
                    </li>
                </ul>
  </div>

</nav>

  </div>

罗纳德特

您是否阅读了Bootstrap文档中的Disable Resposive部分？如果是这样，您觉得哪里出了问题，也许添加一个jsfiddle示例？

禁用页面响应性的步骤

省略CSS文档中提到的视口

用单个宽度覆盖每个网格层的.container上的宽度，例如width：970px！important; 确保这是默认的Bootstrap CSS之后的。您可以选择避免在媒体查询或某些选择符Fu中使用！important。

如果使用导航栏，请删除所有导航栏的折叠和展开行为。

对于网格布局，除了中型或大型类之外，还应使用.col-xs- *类。不用担心，超小的设备网格可扩展到所有分辨率。

您仍然需要针对IE8的Respond.js（因为我们的媒体查询仍然存在并且需要处理）。这将禁用Bootstrap的“移动站点”方面。