Question

奇怪的问题我知道，因为这违背了bootstrap的整个目的及其响应性，但它是我必须做的事情.....

我想要一个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>

Answer 1

您是否阅读过Bootstrap文档中的Disable resposive部分？如果是这样，你在哪里出错了，也许可以添加一个jsfiddle例子？

禁用页面响应的步骤

省略CSS docs中提到的视口

使用单个宽度覆盖每个网格层的.container上的宽度，例如width：970px！important;确保这是在默认的Bootstrap CSS之后。您可以选择使用媒体查询或某些selector-fu。
来避免使用！important
如果使用导航栏，请删除所有导航栏折叠和展开行为。

对于网格布局，请使用.col-xs- *类作为中/大类的补充或替代。别担心，超小型设备网格可以扩展到所有分辨率。

您仍然需要针对IE8的Respond.js（因为我们的媒体查询仍在那里，需要进行处理）。这会禁用＆＃34;移动网站＆＃34; Bootstrap的各个方面。

View the non-responsive example

修复了bootstrap中没有响应的内容

1 个答案:

禁用页面响应的步骤