如何在同一行引导程序上水平对齐 div答案

【问题标题】：How to align divs horizontally on the same line bootstrap如何在同一行引导程序上水平对齐 div
【发布时间】：2020-03-20 04:06:57
【问题描述】：

我正在尝试对齐标题，但我的代码似乎有些问题。

我希望将第 2 列和第 3 列对齐为 TEST 1、TEST 4 和 TEST 5。

codepen 的链接是https://codepen.io/danongu/pen/WNvKOLG

我已经尝试了我知道的 CSS，但似乎我缺少一些东西。我正在使用引导框架。

<!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">Bible Book List</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-md-7 col-sm-7 five-three">
                  <div class="row">
                    <h4 class="bbtt" style="font-weight:600"> TEST 1 </h4>
                    <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>
                          <li>
                               <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-controls="collapseOne">Book 3</a>
                          </li>
                          <li>
                                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-controls="collapseOne">Book 4</a>
                          </li>
                      </ul>
                  </div>

                  <div class="col-sm-4 five-two">
                    Column 2
                  </div>
                  <div class="col-sm-4">
                    Column 3
                  </div>
                </div> <!-- END ROW-->
              </div>
              <div class="col-sm-5 five-two">
                <div class="row">
                  <div class="col-sm-6">
                    <h4 class="bbtt" style="font-weight:600"> TEST 4 </h4>
                  </div>
                  <div class="col-sm-6">
                    <h4 class="bbtt" style="font-weight:600"> TEST 5</h4>
                  </div>
                </div><!-- end inner row -->
              </div>
            </div><!-- end outer row -->
          </div>
        </article>
      </main>
    </div>
  </body>
</html>

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

给你一个解决方案

.text {
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
}

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

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

.panel-body {
  background:#000 !important;
}


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;} @charset "UTF-8";@font-face{font-family:"biblegateway";src:url("/assets/css/fonts/biblegateway.eot?6743930e");src:url("/assets/css/fonts/biblegateway.eot?6743930e#iefix") format("embedded-opentype"),url("/assets/css/fonts/biblegateway.woff?6743930e") format("woff"),url("/assets/css/fonts/biblegateway.ttf?6743930e") format("truetype"),url("/assets/css/fonts/biblegateway.svg?6743930e#biblegateway") 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;} 

@charset "UTF-8";@font-face{font-family:"biblegateway";src:url("/assets/css/fonts/biblegateway.eot?40754a01");src:url("/assets/css/fonts/biblegateway.eot?40754a01#iefix") format("embedded-opentype"),url("/assets/css/fonts/biblegateway.woff?40754a01") format("woff"),url("/assets/css/fonts/biblegateway.ttf?40754a01") format("truetype"),url("/assets/css/fonts/biblegateway.svg?40754a01#biblegateway") 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">Bible Book List</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">
      <div class="col-sm-4">
        <h4 class="bbtt" style="font-weight:600"> TEST 1 </h4>
        <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><li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-controls="collapseOne">Book 3</a></li><li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-controls="collapseOne">Book 4</a></li>
        </ul>
      </div>
 
      <div class="col-sm-4 five-two">
        <span class="text">
          Column 2
        </span>
      </div>
      <div class="col-sm-4">
        <span class="text">
          Column 3
        </span>
      </div><!-- end inner row -->
    </div>
  </div>
  <div class="col-sm-5 five-two">
    <div class="row">
      <div class="col-sm-6">
       <h4 class="bbtt" style="font-weight:600"> TEST 4 </h4>
      </div>
      <div class="col-sm-6">
        <h4 class="bbtt" style="font-weight:600"> TEST 5</h4>
      </div>
    </div><!-- end inner row -->
  </div>
</div><!-- end outer row -->
</div>
        
    </section>
    </article>
  </main>
</div>

h4 作为“文本 1”应在 col-sm-4 内 ul 之前

为column 2 &column 3`添加了一个新类作为text，只是为了调整margin。

【讨论】：

【解决方案2】：

我认为你应该使用一个行类。喜欢：

<div class="row">
 <div class="col-md-3"> your other markup</div>
 <div class="col-md-3"> your other markup</div>
 <div class="col-md-3"> your other markup</div>
 <div class="col-md-3"> your other markup</div>

<div>

md-3 为 4，因为行类的宽度为 12，如果将 12 除以 3，则得到 4。您可以将 col-md- 设为任何您想要的数字。

【讨论】：