小编agi*_*sen的帖子

使用Bootstrap的全宽标签(支持IE)

我正在尝试调整Bootstrap选项卡,使它们跨越容器的整个宽度.这是我的代码(最小的工作示例):

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Full Width Tabs using Bootstrap</title>
        <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
        <style>
            .full-width-tabs > ul.nav.nav-tabs {
                display: table;
                width: 100%;
                table-layout: fixed; /* To make all "columns" equal width regardless of content */
            }
            .full-width-tabs > ul.nav.nav-tabs > li {
                float: none;
                display: table-cell;
            }
            .full-width-tabs > ul.nav.nav-tabs > li > a {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="tabbable full-width-tabs">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab-one" data-toggle="tab">Tab 1</a></li>
                <li><a href="#tab-two" data-toggle="tab">Tab 2</a></li>
            </ul> …

Run Code Online (Sandbox Code Playgroud)

html css tabs twitter-bootstrap

agi*_*sen

2015 05-27

30
推荐指数

4
解决办法

6万
查看次数

使用jQuery UI的可调整大小窗格的完整页面布局

我正在尝试创建webapp的整体布局.该应用程序是全屏的,有一个固定的标题和三列/窗格.中心窗格由两行组成:

app线框布局

通过使用鼠标拖动窗格边缘,窗格应该可以调整大小(请参见上图中的箭头).

在内容溢出的情况下,各个窗格应具有垂直滚动条,即没有全局浏览器窗口滚动条.

使用jQuery和jQuery UI Resizable,我创建了这个(部分工作)JSFiddle.

HTML:

<div class="header">
  Fixed header    
</div>
<div class="wrapper">
   <div class="inner-wrapper">
       <div class="left pane">Left</div>
       <div class="center pane">
           <div class="inner">
               <div class="top">Center top</div>
               <div class="bottom">Center bottom</div>
           </div>
       </div>
       <div class="right pane">Right</div>
   </div>
</div>

Run Code Online (Sandbox Code Playgroud)

CSS:

html, body {
    height: 100%;
}
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background-color: moccasin;  
}
.wrapper {
    position:absolute;
    top: 21px;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: fuchsia;
}
.inner-wrapper,
.center.pane .inner { …

Run Code Online (Sandbox Code Playgroud)

jquery-ui web-applications jquery-ui-resizable

agi*_*sen

lucky-day

23
推荐指数

3
解决办法

5万
查看次数