使用Bootstrap 3进行容器流体和侧面填充

And*_*per 6 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">
Run Code Online (Sandbox Code Playgroud)

什么是正确的Bootstrap方式,100% width左右两侧有流畅的布局和15px填充?

Dan*_*Dan 9

根据Bootstrap文档:

Use .container-fluid for a full width container, spanning the entire width of your viewport.
Run Code Online (Sandbox Code Playgroud)

如果你想要15px填充,那么添加到你的CSS:

.container-fluid {
    padding: 15px;
}
Run Code Online (Sandbox Code Playgroud)

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

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

Bootply演示