html - Bootstrap 中的固定内容没有响应

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

你读过 Disable resposive 了吗？ Bootstrap 文档中的部分？如果是这样，你哪里出了问题，也许添加一个 jsfiddle例子？

禁用页面响应的步骤

1. Omit the viewport mentioned in the CSS docs
2. Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
3. If using navbars, remove all navbar collapsing and expanding behavior.
4. For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.

You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed). This disables the "mobile site" aspects of Bootstrap.

View the non-responsive example