标签: fluid-layout
流体或固定网格系统,采用响应式设计,基于Twitter Bootstrap
我对twitter bootstrap网格中的各种选项以及它们如何组合起来感到困惑.
首先,你可以有一个普通的固定container,或者container-fluid.
然后,任何一个都可以包括普通row行或流体行row-fluid.也就是说,你可以拥有一个带有流体排的固定容器,或一个带有固定排的容器流体......
然后,您可以在其中包含"响应式"媒体查询.
我对这些事情如何相互作用感到困惑.但让我们从一个明显的例子开始.
但是,在我的浏览器中,在该示例页面本身上 - 两个网格的行为相同.也许是因为示例页面使用可选的响应式媒体查询？在两个网格示例中,如果我开始逐渐缩小我的浏览器窗口,则网格元素不会逐渐变窄 - 一旦达到某个(响应性)边界宽度,它们会捕捉到更小的尺寸,并再次在更大的边界宽度处.但是普通的"固定"示例和"流动"示例在这里表现完全相同 - 那么差异究竟是什么呢？
fixed-width fluid-layout responsive-design twitter-bootstrap
推荐指数
解决办法
查看次数
宽度:100%-padding？
我有一个HTML输入.
输入padding: 5px 10px;我希望它是父div的宽度的100%(这是流动的).
然而,使用width: 100%;导致输入是100% + 20px如何绕过这个？
推荐指数
解决办法
查看次数
流体宽度等间距DIV
我有一个流体宽度的容器DIV.
在这个我有4个DIV全部300px x 250px ...
<div id="container">
<div class="box1"> </div>
<div class="box2"> </div>
<div class="box3"> </div>
<div class="box4"> </div>
</div>
我想要发生的是箱子1向左浮动,箱子4向右浮动,箱子2和3在它们之间均匀间隔.我希望间距也是流畅的,因此随着浏览器变小,空间也变小.
推荐指数
解决办法
查看次数
两个div并排 - 流体显示
我试图并排放置两个div并使用以下CSS.
#left {
float: left;
width: 65%;
overflow: hidden;
}
#right {
overflow: hidden;
}
HTML很简单,包装div中有两个左右div.
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
我已经尝试了很多次在StackOverflow和其他网站上搜索更好的方法,但找不到确切的帮助.
所以,乍一看代码工作得很好.问题是这样,当我增加宽度(%)时左边的div会自动获得填充/边距.因此,在宽度为65%时,左边的div有一些填充或边距,并且与右边的div完全对齐,我试图填充/边距0但没有运气.其次,如果我放大页面,右边的div会在左边的div下方滑动,它就像流畅的显示一样.
注意:对不起,我搜索了很多.这个问题已被多次询问,但这些答案对我没有帮助.我已经解释了我的问题是什么.
我希望有一个解决方法.
谢谢.
编辑:对不起,我的HTML问题,左侧和右侧都有两个"盒子"div,它们的填充率为%,因此左侧显示更多填充,因为宽度更大.对不起,上面的CSS工作完美,流畅的显示和固定,抱歉提出错误的问题......
推荐指数
解决办法
查看次数
修复了流畅的twitter bootstrap 2.0中的侧边栏导航
是否可以使侧边栏导航始终固定在流畅布局中滚动？
推荐指数
解决办法
查看次数
css display:表格不显示边框
<html>
<style type="text/css">
.table { display: table;}
.tablerow { display: table-row; border:1px solid black;}
.tablecell { display: table-cell; }
</style>
<div class="table">
<div class="tablerow">
<div class="tablecell">Hello</div>
<div class="tablecell">world</div>
</div>
<div class="tablerow">
<div class="tablecell">foo</div>
<div class="tablecell">bar</div>
</div>
</div>
</html>
根据我的理解,应该在我通过tablerow类指定的每一行上画一个黑色边框.但边框不会出现.
我想改变一行的高度.如果我用'px'指定它 - 它工作.但是,如果我给它一个% - 不会工作.我试过以下
.tablerow {
display: table-row;
border:1px solid black;
position: relative; //not affecting anything and the border disappears!!
//position: absolute; // if this is set,the rows overlaps and the border works
height: 40%; // works only if specified …推荐指数
解决办法
查看次数
仅在移动视图中隐藏div标签？
我正在为网站创建流畅的布局.我试图在移动视图中隐藏一个<div>或整个内容<div>,但不是平板电脑和桌面视图.
这是我到目前为止所得到的......
#title_message {
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
我将移动布局的显示设置为"无",并在平板电脑/桌面布局上设置为块...是否有更简单的方法可以做到这一点,还是这样？
推荐指数
解决办法
查看次数
CSS Div宽度百分比和填充而不破坏布局
可能有一个简单的解决办法,但它已经困扰我多年了...
让我解释一下情况.我有一个ID为'容器'的div,它包含页面中的所有内容(包括页眉和页脚),这些内容将保持所有内联,我只能做一个简单的'margin:0 auto;' 而不是倍数.所以我要说#container的宽度设置为80%.现在,如果我将另一个div放入相同的宽度(80%)并给它带有'10'的填充的'标题'的ID,布局将"破坏"(可以这么说)因为页面添加了填充量宽度.那么,如何在不使用#header div的较低百分比等方法的情况下使其保持入境？基本上,我想让它变得流畅.
这里有一些示例代码可以让您了解我在说什么......
CSS
#container {
position:relative;
width:80%;
height:auto;
}
#header {
position:relative;
width:80%;
height:50px;
padding:10px;
}
HTML
<div id="container">
<div id="header">Header contents</div>
</div>
任何人都可以帮助我解决这个一直困扰着我的问题吗？
推荐指数
解决办法
查看次数
两列div布局,左侧流体和右侧固定柱
我想使用DIV进行两列布局,其中右列的固定宽度为200px,左侧列将占用剩余的所有空间.
如果您使用表格,这很容易:
<table width="100%">
<tr>
<td>Column 1</td>
<td width="200">Column 2 (always 200px)</td>
</tr>
</table>
但DIV怎么样？有可能做到这一点吗？如果是,那怎么样？
推荐指数
解决办法
查看次数
如何在流体宽度容器中居中裁剪图像(<img>)
当流体宽度(基于百分比)容器太小而无法显示整个图像时,如何使图像保持居中？
如何将图像置于其容器中心
这意味着当容器太小时,它应该显示图像的中间而不是侧面.
推荐指数
解决办法
查看次数
标签 统计
fluid-layout ×10
css ×9
html ×4
css-position ×1
css-tables ×1
fixed-width ×1
fluid ×1
fluid-images ×1
image ×1
padding ×1
width ×1