css - 使标题占据与下面的框相同的宽度

Question

我有以下页面，其中有一个标题和一些框：

.bg-secondary-light {
  background-color: #ecf0f5;
}

#content-wrapper {
  min-height: 100vh;
  position: relative;
  margin-top: 59.5px;
}

#main_content {
  height: 100%;
  background-color: #ecf0f5;
}

#main_content main {
  background-color: #ecf0f5;
}

@media (min-width: 992px) {
  #main_content {
    width: 100%;
  }
}

@media (min-width: 992px) {
  #main_content.full_width {
    margin-left: 0px;
    width: 100%;
  }
}

#main_content {
  width: 100%;
}


/*############# Theme Element: BOX ##########*/

.box {
  position: relative;
  border: 1px solid black;
  border-radius: 5px;
  padding: 0 !important;
  background-color: white;
  /*Header*/
}

.box .box-header {
  display: block;
  position: relative;
  box-sizing: border-box;
  height: 3em;
  border-bottom: 1px solid black;
  padding: 0 !important;
  height: 1em;
  /* Wrapper For Button Groups */
}

@media (min-width: 576px) {
  .box .box-header {
    height: 2em;
  }
}

@media (min-width: 768px) {
  .box .box-header {
    height: 3em;
  }
}

.box .box-header h1,
.box .box-header h2,
.box .box-header h3,
.box .box-header h4,
.box .box-header h5,
.box .box-header h6 {
  display: inline-block;
  float: left;
  line-height: 2em;
  margin-left: 4px;
  line-height: 0.9em;
  font-size: 0.9em;
}

@media (min-width: 576px) {
  .box .box-header h1,
  .box .box-header h2,
  .box .box-header h3,
  .box .box-header h4,
  .box .box-header h5,
  .box .box-header h6 {
    line-height: 2em;
    font-size: 1.1em;
  }
}

@media (min-width: 768px) {
  .box .box-header h1,
  .box .box-header h2,
  .box .box-header h3,
  .box .box-header h4,
  .box .box-header h5,
  .box .box-header h6 {
    font-size: 2em;
    font-size: 2em;
  }
}

.box .box-header .box-toolbox {
  position: absolute;
  top: 5px;
  right: 10px;
  float: right;
  display: none;
}

@media (min-width: 768px) {
  .box .box-header .box-toolbox {
    display: inline-block;
  }
}

.box .box-footer {
  display: block;
  position: relative;
  border-top: 1px solid black;
  clear: both;
}

.box .box-content {
  display: block;
  position: relative;
  width: 100%;
  clear: both;
}

.box .box-content.box-text {
  padding-left: 5px;
  padding-right: 5px;
}


/*Headers*/

.title-wrapper {
  border-bottom: 1px solid;
  padding: 0;
  margin: 0;
}

.title-wrapper h1,
.title-wrapper h2,
.title-wrapper h3,
.title-wrapper h4,
.title-wrapper h5,
.title-wrapper h6 {
  margin: 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!-- main content -->
<div id="main_content" class="d-flex">
  <main class="container-fluid m-1">
    <section>

      <div class="w-100 title-wrapper mb-1">
        <h1>Basic Boxes</h1>
      </div>

      <div class="row mb-1">
        <div class="box col">
          <div class="box-header">
            <h2>Full width Box with toolbox</h2>
            <div class="box-toolbox">
              <div class="btn-group" role="group" aria-label="Box Icons">
                <button type="button" class="btn btn-secondary">1</button>
                <button type="button" class="btn btn-secondary">2</button>
                <button type="button" class="btn btn-secondary">3</button>
                <button type="button" class="btn btn-secondary">4</button>
              </div>
            </div>
          </div>
          <div class="box-content text-center w-100">I take over the whole container width.</div>
          <div class="box-footer">
            footer
          </div>
        </div>
        <!-- /box -->
      </div>
      <!-- /row -->

      <div class="row flex-nowrap mb-1">

        <div class="col-6 p-0 pr-1">
          <div class="box">
            <div class="box-header text-light bg-primary">
              <h2>Info Header</h2>
            </div>
            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>
            <div class="box-footer">footer</div>
          </div>
          <!-- /box -->
        </div>
        <div class="col-6 p-0 pl-1">
          <div class="box">
            <div class="box-header text-light bg-info">
              <h2>Primary Header</h2>
            </div>
            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>
            <div class="box-footer">
              footer
            </div>
          </div>
          <!-- /box -->
        </div>

      </div>
      <!-- /row -->

      <div class="row mb-1">

        <div class="col-6 p-0 pr-1">
          <div class="box">
            <div class="box-header text-light bg-success">
              <h2>Sucess Header</h2>
            </div>
            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>
            <div class="box-footer">
              footer
            </div>
          </div>
          <!-- /box -->
        </div>
        <div class="col-6 p-0 pl-1">
          <div class="box">
            <div class="box-header text-light bg-danger">
              <h2>Danger Header</h2>
            </div>
            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element</div>
            <div class="box-footer">
              footer
            </div>
          </div>
          <!-- /box -->
        </div>

      </div>
      <!-- /row -->

      <div class="row">

        <div class="col-6 p-0 pl-1">
          <div class="box">
            <div class="box-header text-light bg-warning">
              <h2>Warning Header</h2>
            </div>
            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>
            <div class="box-footer">footer</div>
          </div>
          <!-- /box -->
        </div>

        <div class="col-6 p-0 pl-1">
          <div class="box">
            <div class="box-header text-light bg-dark">
              <h2>Dark Header</h2>
            </div>
            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>
            <div class="box-footer">footer</div>
          </div>
          <!-- /box -->
        </div>
      </div>
      <!-- /row -->

    </section>
  </main>

</div>
<!-- /main-content -->

</div>
<!-- /content-wrapper -->

但是标题没有如下图所示的框那么宽：

你知道我该如何解决吗？

标签： csshtmlsassbootstrap-4

Answer 1

.bg-secondary-light {
  background-color: #ecf0f5;
}

#content-wrapper {
  min-height: 100vh;
  position: relative;
  margin-top: 59.5px;
}

#main_content {
  height: 100%;
  background-color: #ecf0f5;
}

#main_content main {
  background-color: #ecf0f5;
}

@media (min-width: 992px) {
  #main_content {
    width: 100%;
  }
}

@media (min-width: 992px) {
  #main_content.full_width {
    margin-left: 0px;
    width: 100%;
  }
}

#main_content {
  width: 100%;
}


/*############# Theme Element: BOX ##########*/

.box {
  position: relative;
  border: 1px solid black;
  border-radius: 5px;
  padding: 0 !important;
  background-color: white;
  /*Header*/
}

.box .box-header {
  display: block;
  position: relative;
  box-sizing: border-box;
  height: 3em;
  border-bottom: 1px solid black;
  padding: 0 !important;
  height: 1em;
  /* Wrapper For Button Groups */
}

@media (min-width: 576px) {
  .box .box-header {
    height: 2em;
  }
}

@media (min-width: 768px) {
  .box .box-header {
    height: 3em;
  }
}

.box .box-header h1,
.box .box-header h2,
.box .box-header h3,
.box .box-header h4,
.box .box-header h5,
.box .box-header h6 {
  display: inline-block;
  float: left;
  line-height: 2em;
  margin-left: 4px;
  line-height: 0.9em;
  font-size: 0.9em;
}

@media (min-width: 576px) {
  .box .box-header h1,
  .box .box-header h2,
  .box .box-header h3,
  .box .box-header h4,
  .box .box-header h5,
  .box .box-header h6 {
    line-height: 2em;
    font-size: 1.1em;
  }
}

@media (min-width: 768px) {
  .box .box-header h1,
  .box .box-header h2,
  .box .box-header h3,
  .box .box-header h4,
  .box .box-header h5,
  .box .box-header h6 {
    font-size: 2em;
    font-size: 2em;
  }
}

.box .box-header .box-toolbox {
  position: absolute;
  top: 5px;
  right: 10px;
  float: right;
  display: none;
}

@media (min-width: 768px) {
  .box .box-header .box-toolbox {
    display: inline-block;
  }
}

.box .box-footer {
  display: block;
  position: relative;
  border-top: 1px solid black;
  clear: both;
}

.box .box-content {
  display: block;
  position: relative;
  width: 100%;
  clear: both;
}

.box .box-content.box-text {
  padding-left: 5px;
  padding-right: 5px;
}


/*Headers*/

.title-wrapper {
  border-bottom: 1px solid;
  padding: 0;
  margin: 0;
}

.title-wrapper h1,
.title-wrapper h2,
.title-wrapper h3,
.title-wrapper h4,
.title-wrapper h5,
.title-wrapper h6 {
  margin: 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!-- main content -->
<div id="main_content" class="d-flex">
  <main class="container-fluid m-1">
    <section>

      <div class="row mb-1">
        <div class="box col">
          <h1>Basic Boxes</h1>
        </div>
      </div>

      <div class="row mb-1">
        <div class="box col">
          <div class="box-header">
            <h2>Full width Box with toolbox</h2>
            <div class="box-toolbox">
              <div class="btn-group" role="group" aria-label="Box Icons">
                <button type="button" class="btn btn-secondary">1</button>
                <button type="button" class="btn btn-secondary">2</button>
                <button type="button" class="btn btn-secondary">3</button>
                <button type="button" class="btn btn-secondary">4</button>
              </div>
            </div>
          </div>
          <div class="box-content text-center w-100">I take over the whole container width.</div>
          <div class="box-footer">
            footer
          </div>
        </div>
        <!-- /box -->
      </div>
      <!-- /row -->

      <div class="row flex-nowrap mb-1">

        <div class="col-6 p-0 pr-1">
          <div class="box">
            <div class="box-header text-light bg-primary">
              <h2>Info Header</h2>
            </div>
            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>
            <div class="box-footer">footer</div>
          </div>
          <!-- /box -->
        </div>
        <div class="col-6 p-0 pl-1">
          <div class="box">
            <div class="box-header text-light bg-info">
              <h2>Primary Header</h2>
            </div>
            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>
            <div class="box-footer">
              footer
            </div>
          </div>
          <!-- /box -->
        </div>

      </div>
      <!-- /row -->

      <div class="row mb-1">

        <div class="col-6 p-0 pr-1">
          <div class="box">
            <div class="box-header text-light bg-success">
              <h2>Sucess Header</h2>
            </div>
            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>
            <div class="box-footer">
              footer
            </div>
          </div>
          <!-- /box -->
        </div>
        <div class="col-6 p-0 pl-1">
          <div class="box">
            <div class="box-header text-light bg-danger">
              <h2>Danger Header</h2>
            </div>
            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element</div>
            <div class="box-footer">
              footer
            </div>
          </div>
          <!-- /box -->
        </div>

      </div>
      <!-- /row -->

      <div class="row">

        <div class="col-6 p-0 pl-1">
          <div class="box">
            <div class="box-header text-light bg-warning">
              <h2>Warning Header</h2>
            </div>
            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>
            <div class="box-footer">footer</div>
          </div>
          <!-- /box -->
        </div>

        <div class="col-6 p-0 pl-1">
          <div class="box">
            <div class="box-header text-light bg-dark">
              <h2>Dark Header</h2>
            </div>
            <div class="box-content box-text">Just place the correct background color to the <code>.box-header</code> element </div>
            <div class="box-footer">footer</div>
          </div>
          <!-- /box -->
        </div>
      </div>
      <!-- /row -->

    </section>
  </main>

</div>
<!-- /main-content -->

</div>
<!-- /content-wrapper -->