Question

我有一个标题横幅，覆盖了瓷砖的背景图片。为了使其响应，我将宽度设置为自动，并且在折叠屏幕上看起来很棒（请参阅下面的捕获）。另外，我正在使用Bootstrap 4。

但是，在全屏分辨率下，标题背景不会延伸到div的末尾。我试图消除任何填充，但我似乎无法让它走到最后。见图。

这是我的HTML：

<!--browse by category section-->
    <section id="category">
        <div class="card-header text-center">
            <h4 class="card-title">Browse Workouts by Category</h1>
        </div>
        <div class="row btn-warning">
            <div class="col-sm-2 bg-primary" id="cardio">
                <h1 class="text-center">Cardio</h1>
            </div>
            <div class="col-sm-2 bg-primary">
                Hi
            </div>
            <div class="col-sm-2 bg-primary">
                Hi
            </div>
            <div class="col-sm-2 bg-primary">
                Hi
            </div>
            <div class="col-sm-2 bg-primary">
                Hi
            </div>
            <div class="col-sm-2 bg-primary">
                Hi
            </div>
        </div>
    </section>

和我的CSS：

/*--------------*/
/*---CATEGORIES-----*/
/*--------------*/

#cardio {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../img/users/pexels-photo-460520.jpeg') no-repeat;
    background-size: cover;
    height: 300px;
}

#cardio h1 {
    margin-top: 100px;
    height: 100px;
    width: auto;
    padding-top: 25px;
    color: #fff;
    background: linear-gradient(rgba(93,139,229,0.7), rgba(93,139,229,0.7));
}

Answer 1

首先，您错过了container之前的row div。然后，要强制标题为全宽，您需要添加负边距以覆盖外部类col-sm-2的填充。

正如我在其他答案中看到的那样，避免更改引导类的样式，这可能会破坏您的其他一些布局。

/*--------------*/


/*---CATEGORIES-----*/


/*--------------*/

#cardio {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/users/pexels-photo-460520.jpeg') no-repeat;
  background-size: cover;
  height: 300px;
}

#cardio h1 {
  margin-top: 100px;
  height: 100px;
  margin-left:-15px;
  margin-right:-15px;
  padding-top: 25px;
  color: #fff;
  background: linear-gradient(rgba(93, 139, 229, 0.7), rgba(93, 139, 229, 0.7));
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!--browse by category section-->
<section id="category">
  <div class="card-header text-center">
    <h4 class="card-title">Browse Workouts by Category</h1>
  </div>
  <div class="container">
    <div class="row btn-warning">
      <div class="col-sm-2 bg-primary" id="cardio">
        <h1 class="text-center">Cardio</h1>
      </div>
      <div class="col-sm-2 bg-primary">
        Hi
      </div>
      <div class="col-sm-2 bg-primary">
        Hi
      </div>
      <div class="col-sm-2 bg-primary">
        Hi
      </div>
      <div class="col-sm-2 bg-primary">
        Hi
      </div>
      <div class="col-sm-2 bg-primary">
        Hi
      </div>
    </div>
  </div>
</section>

Answer 2

这应该这样做：

Error in X %*% object$coefficients : non-conformable arguments

按原样保留其余部分

标题没有延伸到div的末尾

2 个答案: