堆栈内存溢出
  简体   繁体   English

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

[英]How to align divs horizontally on the same line bootstrap

 原文  2020-03-20 04:06:57  1   2    jquery/ html/ css/ twitter-bootstrap

问题描述

I am trying to align my headings but something seems off with my code.我正在尝试对齐我的标题，但我的代码似乎有些不对劲。

I want the column 2 and column 3 to be aligned as TEST 1, TEST 4 and TEST 5.我希望第 2 列和第 3 列对齐为 TEST 1、TEST 4 和 TEST 5。

The link to the codepen is https://codepen.io/danongu/pen/WNvKOLG codepen 的链接是https://codepen.io/danongu/pen/WNvKOLG

I have tried the CSS I know but it appears there is something I'm missing.我已经尝试了我知道的 CSS，但似乎我遗漏了一些东西。 I am using the bootstrap framework.我正在使用引导程序框架。 

 <!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>

2 个解决方案

解决方案1
 0  2020-03-20 04:15:40

I think you should use a row class.我认为您应该使用行类。 like:喜欢：

<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>

The md-3 are 4 because the row class has a width of 12 and if you divide 12 by 3 you get 4. You can make the col-md- any number you want tho. md-3 是 4，因为行类的宽度为 12，如果将 12 除以 3，则得到 4。您可以将 col-md- 设为任何您想要的数字。

解决方案2
 0 已采纳  2020-03-20 04:18:43

Here you go with a solution给你一个解决方案

 .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>

You h4 as "Text 1" should be within col-sm-4 before the ul你h4作为“文本 1”应该在ul之前的col-sm-4

Added a new class as text for column 2 & column 3` just to adjust the margin .添加了一个新类作为第column 2 &列column 2 &列的文本，只是为了调整边距。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使 div 垂直和水平居中对齐？ - how to make centre align divs vertically and horizontally? 水平对齐div，隐藏溢出 - Align divs horizontally with overflow hidden 将div与无限高度水平对齐 - Align divs horizontally with infinite height 如何在容器内获取3个div以水平对齐，高度为100％ - How to get 3 divs to align horizontally, with height of 100%, inside a container 如何在Meteor JS中水平对齐div / profile卡？ - How to align the divs/profile cards horizontally in Meteor JS? 如何使bootstrap手风琴标题（链接或按钮）水平放置在同一条线上 - How to make bootstrap accordion headings(links or buttons) lay horizontally on the same line Bootstrap Center 水平对齐一个 div - Bootstrap Center align a div horizontally 使用引导程序垂直/水平对齐 - Align vertically / horizontally using bootstrap 我应该如何对齐三个按钮，以便它们在Bootstrap中水平堆叠 - How should I align three buttons so that they stack horizontally in Bootstrap 如何水平对齐bootstrap 3收音机和收音机的标签？ - How can I horizontally align bootstrap 3 radio and the radio's label?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM