Question

我希望我的页面内容占据屏幕的整个宽度，左右有一点填充，并且流畅，但当我将div.row和div.col-md-x包裹在{{{ 1}}页面的内容触及屏幕的两侧。

<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">，流畅布局和15px填充的正确Bootstrap方法是什么？

Answer 1

根据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

Answer 2

您可以尝试使用<div id="bd" class="container-fluid">的ID，如果在添加Jquery之后添加此脚本，则可以在窗口调整大小时填充，并且可以添加更多分辨率px和更多＆＃34;如果＆＃34;或者只添加左边或右边的填充。

<script>
  $(document).ready(function(){

    function paddingbd(){
      if($(window).width()>800){
        $("#bd").css("padding","30px");
      }else{
        $("#bd").css("padding","");
      }
    }

    paddingbd();

    $(window).on("resize",paddingbd);

  });
<script>

Answer 3

.row的余量为15px。尝试添加

.container-fluid {
    padding: 15px 30px;
}

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

3 个答案:

Bootply demo