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

我想要一个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的“移动站点”方面。


View the non-responsive example

09-05 14:23
查看更多