Как правильно выровнять div bootstrap - PullRequest
Новая
       0

Как правильно выровнять div bootstrap

0 голосов
/ 20 марта 2020

Я использую bootstrap Framework. У меня проблема с двумя столбцами, которые не выравниваются должным образом - столбцы 3 и 4. Все остальное выравнивается хорошо, за исключением этих двух. Когда я использую margin-top, это работает для устройств большого размера, но когда вы изменяете размер вниз, элементы div появляются друг над другом. Поэтому я подумал, что должен быть лучший способ решения этой проблемы. Как видите, с первым и вторым столбцами все в порядке. Даже если вы уменьшите размер экрана, они не перекрываются. Пожалуйста, проверьте этот код.

https://codepen.io/danongu/pen/vYOapXE

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container bible">
  <header class="page-header">
    <h2 class="bbltitle">Book Categories</h2>
  </header>
  <main>
    <article class="panel-group bs-accordion" id="accordion" role="tablist" aria-multiselectable="true">


<div class="col-sm-12 bblcl">
<div class="row">
  <div class="col-sm-7 five-three">
    <div class="row">
      <span>
        <h4 class="bbtt" style="font-weight:600"> CATEGORY 1 </h4> </span>

<div class="col-sm-4">
<ul> 
<li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-controls="collapseOne">Book 1</a></li><li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-controls="collapseOne">Book 2</a></li>
</ul>
</div>


      <div class="col-sm-4">
   <ul> 
<li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse20" aria-controls="collapseOne">Book 3</a></li><li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse21" aria-controls="collapseOne">Book 4</a></li>
    </ul>
      </div>
      <div class="col-sm-4">

        <h4 class="p2p"> CATEGORY 2</h4>
        <ul>
<li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse40" aria-controls="collapseOne">Book 5</a></li><li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse41" aria-controls="collapseOne">Book 6</a></li>
        </ul>
      </div><!-- end inner row -->
    </div>
  </div>
  <div class="col-sm-5 five-two">
    <div class="row">
      <div class="col-sm-6">
     <ul>
<li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse59" aria-controls="collapseOne">Book 7</a></li><li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse60" aria-controls="collapseOne">Book 8</a></li>
      </ul>
      </div>
       <h4 class="bbtt" style="font-weight:600"> CATEGORY 3 </h4>
      <div class="col-sm-6">
    <ul>
<li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse67" aria-controls="collapseOne">Book 9</a></li><li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse68" aria-controls="collapseOne">Book 10</a></li>
     </ul>
      </div>
    </div><!-- end inner row -->
  </div>
</div><!-- end outer row -->
</div>
    </article>
  </main>
</div>

1 Ответ

0 голосов
/ 20 марта 2020

Если вы ищете лучший способ выровнять столбцы, попробуйте следующее:

  1. Начните с создания строки контейнера (которая содержит все столбцы вашей категории)
  2. Создайте одну столбец для каждой категории ( col-md-4 , делит экран на 4 столбца).
  3. Внутри каждого столбца категории создайте 2 строки - одну для заголовка и другую для списка категорий (книга 1). , book2..et c)
  4. Создать 2 столбца ( col-md-6 , разделяет макет на 2 столбца) для списка категорий. 

.col-sm-4 {
  color:#fff
}

.panel-default>.panel-heading {
  background-color:#561b14 !important
}

.panel-body {
  background:#000 !important;
}
.p2p {
  font-weight:600;
  color:#d6d2cb
}

h4.panel-title {
  color:#fff
}

.panel-default {
  background:#000
}
.bible {
  background:#561B14
}

.bbtt {
  color:#deddd9
}

.bblcl {
  background:#561B14
}
.bbltitle {
  color:#deddd9
}
#accordion li {
  list-style:none;
  padding:5px;
}

#accordion li a { 
color:#deddd9;
  font-size:17px
}
#accordion li a:hover {
  background:#711F14;
  padding:5px;
  border-radius:10px;
  color:#deddd9
}

.five-three h4 {
  padding-left:20px
}

/*Start of CSS OF Chapters */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;} body{margin:0;} a{background:transparent;} a:focus{outline:thin dotted;} a:active,a:hover{outline:0;} *,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} html{font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0);} body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.428571429;color:#333333;background-color:#ffffff;} a{color:#428bca;text-decoration:none;} a:hover,a:focus{color:#2a6496;text-decoration:underline;} a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;} h4{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;line-height:1.1;color:inherit;} h4{margin-top:10px;margin-bottom:10px;} h4{font-size:18px;} .clearfix:before,.clearfix:after{content:" ";display:table;} .clearfix:after{clear:both;} @-ms-viewport{width:device-width;} format("svg");font-weight:normal;font-style:normal;} html,body,a{-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;-ms-font-smoothing:antialiased;font-smoothing:antialiased;} html{font-size:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);} body{background-color:#f6f4f2;font-size:14px;color:#000;} a{cursor:pointer;} h4{font-size:18px;} h4{color:#676767;font-size:13px;font-size:13px;font-weight:400;line-height:15px;margin-top:0;} a:visited{color:#b34b2c;} @media (min-width:768px){h4{font-size:15px;font-size:15px;font-weight:400;line-height:15px;}} a{color:#631e16;text-decoration:none;} a:hover,a:focus{color:#511811;text-decoration:underline;} a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;} div.bbl-chapters-container{display:none;background-color:black;} @media (max-width:767px){div.bbl-chapters-container{position:relative;height:100%;border-radius:5px;padding-top:45px;}} @media (min-width:768px) and (max-width:1204px){div.bbl-chapters-container{margin-left:-12px;margin-right:-11px; margin-bottom:-12px}} @media (min-width:1205px){div.bbl-chapters-container{padding:1px 22px 0;margin:-1px 10px 0;border-radius:0 0 5px 5px;}} div.bbl-chapters{} @media (min-width:768px) and (max-width:1204px){div.bbl-chapters{display:none;margin-bottom:-15px;padding:20px 37px;}}  div.bbl-chapters.open{display:block;} .bbl-chapter-heading{font-size:14px;font-weight:bold;letter-spacing:0.15em;margin:0;text-transform:uppercase;} .bbl-chapter-heading{display:none;color:#deddd9;} @media (min-width:768px){.bbl-chapter-heading{display:block;margin-top:10px !important}} .bbl-chapters div.bbl-chapter-table{display:none;padding:1px 0 0 1px;} @media (min-width:768px){.bbl-chapters div.bbl-chapter-table{margin:15px 0 0 0;display:inline-block;}} .bbl-chapters.open div.bbl-chapter-table{display:inline-block;} .bbl-chapters div.bbl-chapter{text-align:center;border:1px solid #373738;display:inline-block;margin:-1px 0 0 -1px;} .bbl-chapters div.bbl-chapter:hover{background-color:#902b1f;color:#e8e6e4;} .bbl-chapters div.bbl-chapter a{color:#deddd9;display:block;width:42px;height:42px;line-height:42px;text-decoration:none;font-size:15px;} 

/*
Start of List of Chapters CSS
*/

#bbl ul.books li:hover a{color:#ead3d0;background-color:#902b1f;} 

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;} body{margin:0;} a{background:transparent;} a:focus{outline:thin dotted;} a:active,a:hover{outline:0;} *,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} html{font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0);} body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.428571429;color:#333333;background-color:#ffffff;} a{color:#428bca;text-decoration:none;} a:hover,a:focus{color:#2a6496;text-decoration:underline;} a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;} h3{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;line-height:1.1;color:inherit;} h3{margin-top:20px;margin-bottom:10px;} h3{font-size:24px;} ul{margin-top:0;margin-bottom:10px;} .clearfix:before,.clearfix:after{content:" ";display:table;} .clearfix:after{clear:both;} @-ms-viewport{width:device-width;} 

format("svg");font-weight:normal;font-style:normal;} 

html,body,a{-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;-ms-font-smoothing:antialiased;font-smoothing:antialiased;} 
html{font-size:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);} 
body{background-color:#f6f4f2;font-size:14px;color:#000;} 
a{cursor:pointer;} 
h3{font-size:24px;} 
a:visited{color:#b34b2c;} 
a{color:#631e16;text-decoration:none;} 
a:hover,a:focus{color:#511811;text-decoration:underline;} 
a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;} 
#bbl-wrapper1{display:none;} 
@media (min-width:768px){#bbl-wrapper1{display:block;}} 
#bbl{display:none;font-size:14px;} 
@media (min-width:768px) and (max-width:1204px){#bbl{margin-left:-165px;padding-left:5px;}} 
@media (min-width:1205px){#bbl{padding-left:5px;}} 
.bbl-column{float:left;padding:0 0 15px 0;margin-left:10px;} 
.bbl-column:first-child{margin-left:0;} 
.bbl-column h3{font-size:14px;color:#ead3d0;font-weight:bold;text-transform:uppercase;letter-spacing:0.15em;padding-left:20px;} 
.bbl-column:first-child h3{padding-left:10px;} 
.bbl-column ul.books{float:left;width:140px;padding:0;margin:0;line-height:22px;} 
@media (min-width:1024px){.bbl-column ul.books{width:150px;}} 
.bbl-column ul.books.first{float:left;padding-left:10px;border-left:1px solid #711f14;} 
.bbl-column:first-child ul.books.first{padding-left:0;border-left:none;} 
#bbl ul.books li{list-style-type:none;} 
#bbl ul.books li a{display:inline-block;width:90%;padding:0 0 0 10px;border-radius:10px;color:#d6d2cb;text-decoration:none;} 

div.bbl-all-books{padding:0 0 15px 10px;clear:both;} 

.bbl-all-books a{color:#deddd9;}
#bbl-wrapper1 {
  background:#711E13;
  width:1000px
}


/*Start of chapters*/

div.col-sm-7.five-three {
    width: 60% !important;
    }

    div.col-sm-5.five-two {
      width: 40% !important;
    }
  
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container bible">
    <header class="page-header">
      <h2 class="bbltitle">Book Categories</h2>
    </header>
    <main>
      <article class="panel-group bs-accordion" id="accordion" role="tablist" aria-multiselectable="true">
        <!-- Container -->
        <div class="row bblcl">
          <!-- Category 1 Column -->
          <div class="col-md-4">
            <!-- Category 1 title row -->
            <div class="row">
              <h4 class="bbtt text-center" style="font-weight:600"> CATEGORY 1 </h4>
            </div>
            <!-- Category 1 title row -->
            <!-- 2 column books row -->
            <div class="row">
              <div class="col-md-6">
                <ul>
                  <li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-controls="collapseOne">Book 1</a></li>
                  <li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-controls="collapseOne">Book 2</a></li>
                </ul>
              </div>
              <div class="col-md-6">
                <ul>
                  <li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse20" aria-controls="collapseOne">Book 3</a></li>
                  <li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse21" aria-controls="collapseOne">Book 4</a></li>
                </ul>
              </div>
            </div>
            <!-- 2 column books row -->
          </div>
          <!-- Category 1 Column -->

          <!-- Category 2 Column -->
          <div class="col-md-4">
            <!-- Category 2 title row -->
            <div class="row">
              <h4 class="p2p text-center" style="font-weight:600"> CATEGORY 2</h4>
            </div>
            <!-- Category 2 title row -->
            <!-- 2 column books row -->
            <div class="row">
              <div class="col-md-6">
                <ul>
                  <li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse40" aria-controls="collapseOne">Book 5</a></li>
                  <li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse41" aria-controls="collapseOne">Book 6</a></li>
                </ul>
              </div>
              <div class="col-md-6">
                <ul>
                  <li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse59" aria-controls="collapseOne">Book 7</a></li>
                  <li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse60" aria-controls="collapseOne">Book 8</a></li>
                </ul>
              </div>
            </div>
            <!-- 2 column books row -->
          </div>
          <!-- Category 2 Column -->

          <!-- Category 3 Column -->
          <div class="col-md-4">
            <!-- Category 3 title row -->
            <div class="row">
              <h4 class="bbtt text-center" style="font-weight:600">CATEGORY 3</h4>
            </div>
            <!-- Category 3 title row -->
            <!-- 2 column books row -->
            <div class="row">
              <div class="col-md-6">
                <ul>
                  <li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse67" aria-controls="collapseOne">Book 9</a></li>
                  <li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse68" aria-controls="collapseOne">Book 10</a></li>
                </ul>
              </div>
              <div class="col-md-6">

              </div>
            </div>
            <!-- 2 column books row -->
          </div>
          <!-- Category 3 Column -->

        </div>
        <!-- Container -->
      </article>
    </main>
  </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...