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