Заголовок полной ширины на коробчатых элементах в html / css

Question

Я пытаюсь скопировать Box администратора LTE , используя scss (saas) и bootstrap 4:

Мой код для достижения этой цели следующий (мне пришлось поместить скомпилированный css к примеру), и его также можно найти на моем codepen :

.box {
  position: relative;
  margin: 2px;
  border: 1px solid black;
  border-radius: 5px;
  /*Header*/
}
.box .box-header {
  display: block;
  position: relative;
  box-sizing: border-box;
  height: 3em;
  border-bottom: 1px solid black;
  /* Wrapper For Button Groups */
}
.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;
  font-size: 2em;
  float: left;
  line-height: 2em;
}
.box .box-header .box-toolbox {
  position: absolute;
  top: 5px;
  right: 10px;
  display: inline-block;
  float: right;
}
.box .box-header.bg-primary h1, .box .box-header.bg-primary h2, .box .box-header.bg-primary h3, .box .box-header.bg-primary h4, .box .box-header.bg-primary h5, .box .box-header.bg-primary h6 {
  color: #fdfdfd;
}
.box .box-footer {
  display: block;
  position: relative;
  border-top: 1px solid black;
}
.box .box-content {
  display: block;
  position: relative;
  width: 100%;
}

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

<div class="container">
  <div class="row">
    <div class="box col">
      <div class="box-header bg-primary">
        <h1>Title</h1>
        <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">Dolorem veritatis provident ut et. A aut et sapiente accusamus et alias. Deserunt voluptatem et ipsam accusantium est. Est enim esse nihil dolorem. Deserunt assumenda error sit soluta.Facilis sint eveniet possimus magnam. Magni laudantium quasi
        a praesentium et a. Alias consequatur corrupti non consequatur qui vitae necessitatibus et. Occaecati et aliquid et. Architecto eveniet aspernatur pariatur quia laborum. Itaque cumque magnam impedit inventore reprehenderit dolor atque mollitia.Aut
        commodi ducimus porro. Porro et non alias aperiam dolorum veniam quo. Provident dolores veniam eum.Qui reprehenderit quam dolorum qui incidunt voluptates aut. Iure rerum eius molestias voluptatem quo laudantium nobis. Ex animi temporibus velit
        laborum at est odit pariatur.Laborum qui qui impedit eum. Non eos quo rem dolor quibusdam et. Amet dolorem magni vitae sequi deserunt et officia rem. Aspernatur harum non repellat omnis a commodi quo ipsum. Non ea quod recusandae id. Est iure
        corporis quisquam laboriosam aut.
      </div>
      <div class="box-footer">
        footer
      </div>
    </div>
<div class="box col">
      <div class="box-header bg-primary">
        <h1>Title</h1>
        <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">Dolorem veritatis provident ut et. A aut et sapiente accusamus et alias. Deserunt voluptatem et ipsam accusantium est. Est enim esse nihil dolorem. Deserunt assumenda error sit soluta.Facilis sint eveniet possimus magnam. Magni laudantium quasi
        a praesentium et a. Alias consequatur corrupti non consequatur qui vitae necessitatibus et. Occaecati et aliquid et. Architecto eveniet aspernatur pariatur quia laborum. Itaque cumque magnam impedit inventore reprehenderit dolor atque mollitia.Aut
        commodi ducimus porro. Porro et non alias aperiam dolorum veniam quo. Provident dolores veniam eum.Qui reprehenderit quam dolorum qui incidunt voluptates aut. Iure rerum eius molestias voluptatem quo laudantium nobis. Ex animi temporibus velit
        laborum at est odit pariatur.Laborum qui qui impedit eum. Non eos quo rem dolor quibusdam et. Amet dolorem magni vitae sequi deserunt et officia rem. Aspernatur harum non repellat omnis a commodi quo ipsum. Non ea quod recusandae id. Est iure
        corporis quisquam laboriosam aut.
      </div>
      <div class="box-footer">
        footer
      </div>
    </div>
  </div>
</div>

Моя проблема в том, что заголовок не занимает весь заголовок ширины, как вы можете видеть на следующих изображениях:

И оригинальный вид коробки (без пояснительных стрелок):

Можете ли вы помочь мне обрезать это пространство?

Answer 1

Вы можете добавить класс "p-0" к div "box col". Я думаю, что пространство от дополнения начальной загрузки полковника.

EDIT:

    <div class="box col p-0">

Answer 2

Обновлен ответ. Вы можете изменить ширину содержимого бокса в соответствии с вашими требованиями.

.box {
  position: relative;
  margin: 2px;
  border: 1px solid black;
  border-radius: 5px;
  /*Header*/
}
.box .box-header {
  display: block;
  position: relative;
  box-sizing: border-box;
  height: 3em;
  border-bottom: 1px solid black;
  /* Wrapper For Button Groups */
}
.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;
  font-size: 2em;
  float: left;
  line-height: 2em;
}
.box .box-header .box-toolbox {
  position: absolute;
  top: 5px;
  right: 10px;
  display: inline-block;
  float: right;
}
.box .box-header.bg-primary h1, .box .box-header.bg-primary h2, .box .box-header.bg-primary h3, .box .box-header.bg-primary h4, .box .box-header.bg-primary h5, .box .box-header.bg-primary h6 {
  color: #fdfdfd;
}
.box .box-footer {
  display: block;
  position: relative;
  border-top: 1px solid black;
}
.box .box-content {
  display: block;
  position: relative;
  width: 80%; /* Change this as per your requirement */
  margin-left:auto;
  margin-right:auto;
}

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

<div class="container-fluid">
  <div class="row">
    <div class="box col p-0">
      <div class="box-header bg-primary">
        <h1>Title</h1>
        <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">Dolorem veritatis provident ut et. A aut et sapiente accusamus et alias. Deserunt voluptatem et ipsam accusantium est. Est enim esse nihil dolorem. Deserunt assumenda error sit soluta.Facilis sint eveniet possimus magnam. Magni laudantium quasi
        a praesentium et a. Alias consequatur corrupti non consequatur qui vitae necessitatibus et. Occaecati et aliquid et. Architecto eveniet aspernatur pariatur quia laborum. Itaque cumque magnam impedit inventore reprehenderit dolor atque mollitia.Aut
        commodi ducimus porro. Porro et non alias aperiam dolorum veniam quo. Provident dolores veniam eum.Qui reprehenderit quam dolorum qui incidunt voluptates aut. Iure rerum eius molestias voluptatem quo laudantium nobis. Ex animi temporibus velit
        laborum at est odit pariatur.Laborum qui qui impedit eum. Non eos quo rem dolor quibusdam et. Amet dolorem magni vitae sequi deserunt et officia rem. Aspernatur harum non repellat omnis a commodi quo ipsum. Non ea quod recusandae id. Est iure
        corporis quisquam laboriosam aut.
      </div>
      <div class="box-footer">
        footer
      </div>
    </div>
<div class="box col p-0">
      <div class="box-header bg-primary">
        <h1>Title</h1>
        <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">Dolorem veritatis provident ut et. A aut et sapiente accusamus et alias. Deserunt voluptatem et ipsam accusantium est. Est enim esse nihil dolorem. Deserunt assumenda error sit soluta.Facilis sint eveniet possimus magnam. Magni laudantium quasi
        a praesentium et a. Alias consequatur corrupti non consequatur qui vitae necessitatibus et. Occaecati et aliquid et. Architecto eveniet aspernatur pariatur quia laborum. Itaque cumque magnam impedit inventore reprehenderit dolor atque mollitia.Aut
        commodi ducimus porro. Porro et non alias aperiam dolorum veniam quo. Provident dolores veniam eum.Qui reprehenderit quam dolorum qui incidunt voluptates aut. Iure rerum eius molestias voluptatem quo laudantium nobis. Ex animi temporibus velit
        laborum at est odit pariatur.Laborum qui qui impedit eum. Non eos quo rem dolor quibusdam et. Amet dolorem magni vitae sequi deserunt et officia rem. Aspernatur harum non repellat omnis a commodi quo ipsum. Non ea quod recusandae id. Est iure
        corporis quisquam laboriosam aut.
      </div>
      <div class="box-footer">
        footer
      </div>
    </div>
  </div>
</div>

Answer 3

Полный заголовок и содержимое в штучной упаковке не могут быть достигнуты, если оба находятся в одном контейнере. Простое решение - вывести заголовок HTML из контейнера.

    .box {
      position: relative;
      margin: 2px;
      border: 1px solid black;
      border-radius: 5px;
      /*Header*/
    }
    .box .box-header {
      display: block;
      position: relative;
      box-sizing: border-box;
      height: 3em;
      border-bottom: 1px solid black;
      /* Wrapper For Button Groups */
    }
    .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;
      font-size: 2em;
      float: left;
      line-height: 2em;
    }
    .box .box-header .box-toolbox {
      position: absolute;
      top: 5px;
      right: 10px;
      display: inline-block;
      float: right;
    }
    .box .box-header.bg-primary h1, .box .box-header.bg-primary h2, .box .box-header.bg-primary h3, .box .box-header.bg-primary h4, .box .box-header.bg-primary h5, .box .box-header.bg-primary h6 {
      color: #fdfdfd;
    }
    .box .box-footer {
      display: block;
      position: relative;
      border-top: 1px solid black;
    }
    .box .box-content {
      display: block;
      position: relative;
      width: 100%;
    }

<!-- language: lang-html -->

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

<div class="box-header bg-primary">
  <h1>Title</h1>
  <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="container">
      <div class="row">
        <div class="box col">
          <div class="box-content">Dolorem veritatis provident ut et. A aut et sapiente accusamus et alias. Deserunt voluptatem et ipsam accusantium est. Est enim esse nihil dolorem. Deserunt assumenda error sit soluta.Facilis sint eveniet possimus magnam. Magni laudantium quasi
            a praesentium et a. Alias consequatur corrupti non consequatur qui vitae necessitatibus et. Occaecati et aliquid et. Architecto eveniet aspernatur pariatur quia laborum. Itaque cumque magnam impedit inventore reprehenderit dolor atque mollitia.Aut
            commodi ducimus porro. Porro et non alias aperiam dolorum veniam quo. Provident dolores veniam eum.Qui reprehenderit quam dolorum qui incidunt voluptates aut. Iure rerum eius molestias voluptatem quo laudantium nobis. Ex animi temporibus velit
            laborum at est odit pariatur.Laborum qui qui impedit eum. Non eos quo rem dolor quibusdam et. Amet dolorem magni vitae sequi deserunt et officia rem. Aspernatur harum non repellat omnis a commodi quo ipsum. Non ea quod recusandae id. Est iure
            corporis quisquam laboriosam aut.
          </div>
          <div class="box-footer">
            footer
          </div>
        </div>
      </div>
    </div>