twitter-bootstrap-3 - 使用 Bootstrap 3 的容器流体和侧边填充

标签 twitter-bootstrap-3

我希望我的页面内容占据屏幕的整个宽度,左右都有一点填充并且是流畅的,但是当我包装我的 div.row 时和 div.col-md-x<div class="container-fluid">页面的内容触及屏幕的两侧。

    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">

拥有 100% width 的正确引导方式是什么? ,流畅的布局,以及左右各 15px 的内边距?

最佳答案

根据 Bootstrap docs :

Use .container-fluid for a full width container, spanning the entire width of your viewport.

如果你想要 15px 填充然后添加到你的 CSS:
.container-fluid {
    padding: 15px;
}

但是,您可能希望使用百分比( padding: 2% )或媒体查询,因为 15px在不同的屏幕分辨率下看起来会有所不同。

另一种选择:使用 <div class="container">而不是 <div class="container-fluid"> .这将为您提供内置填充。

Bootply demo

关于twitter-bootstrap-3 - 使用 Bootstrap 3 的容器流体和侧边填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25344168/

相关文章:

jquery - 无法正确定位清除按钮

html - 将两个 div 与所有设备的图像和文本对齐

css - Bootstrap - 如何在调整大小时(垂直和水平)保持 Bootstrap 列之间的空间?

jquery - 如何重构代码以使 Bootstrap 的模态方法使用回调异步?

javascript - Gridster 的替代品

javascript - 选择 : Combine value of two or more select and get their combination as output

css - Chrome 中的日期输入太宽

javascript - 多个引导 Accordion 面板 - 一次仅打开一个

html - Bootstrap 按钮轮廓不起作用

html - 在桌面和移动 View 上重新排序 Bootstrap 列