使用 Bootstrap 3 的容器流体和侧边填充 [英] container-fluid and side padding with Bootstrap 3
问题描述
我希望我的页面内容占据屏幕的整个宽度，并在左右两侧有一点填充并且流畅，但是当我包裹我的 div.row 和 div 时.col-md-x 在 <div class="container-fluid"> 页面的内容接触屏幕的两侧.
<身体><div class="container-fluid"><div class="row"><div class="col-md-6">具有 100% 宽度、流畅布局和 15px 左右边距的正确 Bootstrap 方法是什么?
根据 Bootstrap 文档:>
将 .container-fluid 用于全宽容器，跨越视口的整个宽度.如果你想要 15px 的内边距，那么添加到你的 CSS 中:
.container-fluid {填充:15px；}但是，您可能希望使用百分比(padding: 2%)或媒体查询，因为 15px 在不同的屏幕分辨率下看起来会有所不同.
另一种选择:使用
.这将为您提供内置填充.Bootply 演示
I want my page's content to take up the full width of the screen with a little padding on the right and left and be fluid, but when I wrap my div.row and div.col-md-x in a <div class="container-fluid"> the page's content touches the sides of the screen.
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
What is the proper, Bootstrap way to have a 100% width, fluid layout, and 15px padding on the left and right?
解决方案 As per the Bootstrap docs:
Use .container-fluid for a full width container, spanning the entire width of your viewport.
If you want 15px padding then add to your CSS:
.container-fluid {
padding: 15px;
}
However you may want to use a percent (padding: 2%) or media queries since 15px will look different on different screen resolutions.
Another option: use <div class="container"> instead of <div class="container-fluid">. This will give you built in padding.
Bootply demo
这篇关于使用 Bootstrap 3 的容器流体和侧边填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
