БЛОГ НА HUSL


как задать отступыколонкам bootstrap

Автор вопроса: Sirius_MkLain

Есть row поделенный на 5 и 7 у них есть Background color который слился воедино, padding не помогает, margin сносит строку, никак не могу найти решение, на офф сайте, помогите плиз!

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  font-size: 16px;
}


/* Bootstrap
------------------------------------------------------------- */
/* Grid xxxl */
.col-xxxl,
.col-xxxl-auto,
.col-xxxl-12,
.col-xxxl-11,
.col-xxxl-10,
.col-xxxl-9,
.col-xxxl-8,
.col-xxxl-7,
.col-xxxl-6,
.col-xxxl-5,
.col-xxxl-4,
.col-xxxl-3,
.col-xxxl-2,
.col-xxxl-1 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 1600px) {
  .col-xxxl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .row-cols-xxxl-1 > * {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .row-cols-xxxl-2 > * {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row-cols-xxxl-3 > * {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .row-cols-xxxl-4 > * {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .row-cols-xxxl-5 > * {
    flex: 0 0 20%;
    max-width: 20%;
  }

  .row-cols-xxxl-6 > * {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-xxxl-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-xxxl-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-xxxl-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-xxxl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-xxxl-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-xxxl-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-xxxl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-xxxl-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-xxxl-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-xxxl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-xxxl-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-xxxl-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-xxxl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 1600px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl,
  .container-xxxl {
    max-width: 1536px;
  }
}


/* Navbar */
.navbar {
  height: 100%;
  padding: 0;
}

.navbar-brand {
  padding: 0;
  width: 16.6666666667%;
}

.navbar-logo {
  height: 60px;
  width: auto;
}

.nav-link {
  display: flex;
  align-items: center;
}

/* Nav list */
/* .nav-list {
  display: flex;
}

.nav-list__icon {
  margin-right: 1rem;
} */


/* Dropdown */
.dropdown-toggle:after {
  border: 0;
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}


/* Forms */
.form-group:not(:last-child) {
  margin-bottom: 1rem;
}


/* Common
------------------------------------------------------------- */
/* Content */
.wrapper {
  flex: 1 0 auto;
  padding-top: 112px;
}

.content {
  height: 100%;
  flex-grow: 0;
  padding: 40px 0;
}


/* Header */
.header {
  height: 112px;
}

.header__top {
  background-color: #343434;
  color: #fff;
  display: flex;
  align-items: center;
  height: 40px;
}

.header__bottom {
  background-color: #4B4B4B;
  height: 72px;
}


/* Social */
.social {
  display: flex;
}

.social__link {
  background-color: #fff;
  border-radius: 50%;
  color: #5A5A5A;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  font-size: 16px;
  width: 24px;
}

.social__link:not(:last-child) {
  margin-right: 1rem;
}


/* cover */
.cover {
    background-color: aquamarine;
    display: flex;
    align-items: center;
    height: 100%;
}

.cover__content {
    padding: 60px 0;
}

/* text_rotate */

.text_rotate {
    transform: rotate(-10.61deg);
  margin-top: 61px;
}

/* icon */
.icon {
  color: #5A5A5A;
}


/* footer */
.footer {
  flex-shrink: 0;
  background-color: #343434;
}

.footer__top {
  border-bottom: 0.5px solid rgba(255,255,255, .5);
  color: #fff;
  padding: 82px 0;
}

.footer__bottom {
  padding: 24px 0;
}

.nav-link {
  color: #FFFFFF;
}

.nav-item {
  padding-top: 10px;
}

.nav-item a {
  padding: 0;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

<main class="content">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Главная</a></li>
                <li class="breadcrumb-item active" aria-current="page">Личный кабинет</li>
            </ol>
        </nav>
        <div class="row pb-4">
            <div class="col-lg-5">
                <h1>Личный кабинет</h1>
            </div>
            <div class="col-lg-7">
                <h5>Выйти</h5>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-5 p-4 bg-secondary">
                <div class="row">
                    <div class="col-lg-12">
                        <h4>Мои данные</h4>
                        <div class="row bg-light p-1">
                            <div class="col-lg-3">
                                <img src="img/user_img.png" alt="">
                            </div>
                            <div class="col-lg-8">
                                <h5>Иванов Иван</h5>
                                <ul class="nav flex-column">
                                    <li class="nav-item">
                                        <a href="mailto:[email protected]">[email protected]</a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="tel:+79998885522">8 (888) 888 88 88</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-lg-1"><i class="fas fa-edit"></i></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-7 bg-secondary p-4">
                <h4>Активные заказы</h4>
                <div class="row bg-light p-1">
                    <div class="row">
                        <div class="col-lg-6">
                            <p>Заказ №546633 от 15.01.2021</p>
                        </div>
                        <div class="col-lg-3">
                            <p>3 товара на сумму</p>
                        </div>
                        <div class="col-lg-3">
                            <h5>23 999 ₽</h5>
                        </div>
                        <div class="row">
                            <div class="col-lg-2">
                                <img src="img/active_order_img.png" alt="">
                                <p>MZF-0478</p>
                            </div>
                            <div class="col-lg-2">
                                <img src="img/active_order_img.png" alt="">
                                <p>MZF-0478</p>
                            </div>
                            <div class="col-lg-2">
                                <img src="img/active_order_img.png" alt="">
                                <p>MZF-0478</p>
                            </div>
                            <div class="row">
                                <div class="offset-lg-8 col-lg-4">
                                    <p>Получено 18.01.2021</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-7 offset-lg-5 bg-secondary p-4">
            <h4>Завершенные заказы</h4>
            <div class="row bg-light p-1">
                <div class="row">
                    <div class="col-lg-6">
                        <p>Заказ №546633 от 15.01.2021</p>
                    </div>
                    <div class="col-lg-3">
                        <p>3 товара на сумму</p>
                    </div>
                    <div class="col-lg-3">
                        <h5>23 999 ₽</h5>
                    </div>
                    <div class="row">
                        <div class="col-lg-2">
                            <img src="img/active_order_img.png" alt="">
                            <p>MZF-0478</p>
                        </div>
                        <div class="col-lg-2">
                            <img src="img/active_order_img.png" alt="">
                            <p>MZF-0478</p>
                        </div>
                        <div class="col-lg-2">
                            <img src="img/active_order_img.png" alt="">
                            <p>MZF-0478</p>
                        </div>
                        <div class="row">
                            <div class="offset-lg-8 col-lg-4">
                                <p>Получено 18.01.2021</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row bg-light p-1">
                <div class="row">
                    <div class="col-lg-6">
                        <p>Заказ №546633 от 15.01.2021</p>
                    </div>
                    <div class="col-lg-3">
                        <p>3 товара на сумму</p>
                    </div>
                    <div class="col-lg-3">
                        <h5>23 999 ₽</h5>
                    </div>
                    <div class="row">
                        <div class="col-lg-2">
                            <img src="img/active_order_img.png" alt="">
                            <p>MZF-0478</p>
                        </div>
                        <div class="col-lg-2">
                            <img src="img/active_order_img.png" alt="">
                            <p>MZF-0478</p>
                        </div>
                        <div class="row">
                            <div class="offset-lg-8 col-lg-4">
                                <p>Получено 18.01.2021</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row bg-light p-1">
                <div class="row">
                    <div class="col-lg-6">
                        <p>Заказ №546633 от 15.01.2021</p>
                    </div>
                    <div class="col-lg-3">
                        <p>3 товара на сумму</p>
                    </div>
                    <div class="col-lg-3">
                        <h5>23 999 ₽</h5>
                    </div>
                    <div class="row">
                        <div class="col-lg-2">
                            <img src="img/active_order_img.png" alt="">
                            <p>MZF-0478</p>
                        </div>
                        <div class="col-lg-2">
                            <img src="img/active_order_img.png" alt="">
                            <p>MZF-0478</p>
                        </div>
                        <div class="col-lg-2">
                            <img src="img/active_order_img.png" alt="">
                            <p>MZF-0478</p>
                        </div>
                        <div class="col-lg-2">
                            <img src="img/active_order_img.png" alt="">
                            <p>MZF-0478</p>
                        </div>
                        <div class="row">
                            <div class="offset-lg-8 col-lg-4">
                                <p>Получено 18.01.2021</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="container">
        <div class="row ">
            <div class="col">
                <div class=" border bg-light">Custom column padding</div>
            </div>
            <div class="col">
                <div class=" border bg-light">Custom column padding</div>
            </div>
        </div>
    </div>
</main>


  </body>
</html>


Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.