如何使按鈕水平對齊（使用引導程序）

Question

我試圖使藍色按鈕始終保持對齊。 根據屏幕的大小和文本移動到多行，這將導致按鈕不對齊。 我可以獲取有關如何保持這些狀態的幫助嗎？ http://marketing.geneia.com/himss2019/

按鈕的屏幕截圖

 @charset "utf-8"; /* CSS Document */ /* --------Resets-------- */ *{ margin:0; padding:0; border:0; } html, body { margin: 0px; padding: 0px; border: 0px; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } body { font-family: Averta-Regular, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { margin: 0 0 25px 0; padding: 0; font-family: Averta-Regular, sans-serif; } /* --------Styles-------- */ h1 { font-size: 36px; font-family: Averta-Extrabold, sans-serif; font-weight: normal; font-style: normal; } h2 { font-size: 28px; color: #125687; font-family: Averta-Extrabold, sans-serif; } h2.smaller-blue { font-size: 24px; } h3 { font-size: 18px; font-family: Averta-Semibold, sans-serif; font-weight: normal; line-height: 28px; } p, li { color: #00354e; font-size: 17px; line-height: 30px; } ul { list-style: none; margin-bottom: 1.5rem; } li { padding-left: 30px; } li:before { content: ""; border-color: transparent #00aecb; border-style: solid; border-width: 0.35em 0 0.35em 0.45em; display: block; height: 0; width: 0; left: -1.2em; top: 1.1em; position: relative; } a { position: relative; display: inline-block; transition: .3s; text-decoration: none; color: #00aecb; } a::after { position: absolute; bottom: .3em; left: 0; content: ''; width: 100%; height: 1px; background-color: #00adca; opacity: 0; transition: .3s; } a:hover::after { bottom: 0; opacity: 1; color: #00adca; } a:hover { color: #00adca; text-decoration: none; cursor: pointer; } b, strong, .bold { font-weight: 700; } hr { margin: 20px 0; width: 100%; border-top: 1px solid #cacfde; } .uppercase { text-transform: uppercase; } .container, .container-fluid { margin-right: auto; margin-left: auto; padding-left: 25px; padding-right: 25px; max-width: 1366px; } .uppercase { text-transform: uppercase; } .vert-middle { display: flex; align-items: center; flex-wrap: wrap; } .green { color: #a3d869; } .teal { color: #00aecb; } .drk-blue { color: #125687; } section.background-grey { background: #eeeff2; padding: 60px 20px; } section.background-white { background: #fff; padding: 60px 20px; } .center { margin: 0 auto; text-align: center; } .img-responsive { display: block; max-width: 100%; height: auto; } .btn { background-color: #4CAF50; /* Green */ border: none; border-radius: 4px; color: white; font-family: Averta-Semibold; font-weight: normal; padding: 18px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 18px; margin: 4px 2px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; cursor: pointer; } a.btn:hover { background-color: #42cfe6; color: #fff; } a.btn::after { display: none; } .btn-teal { background-color: #00AECB; } a.btn.btn-teal:hover { background-color: #42cfe6; } .btn-drkblue { background-color: #0f5687; } a.btn.btn-drkblue:hover { background-color: #0d3a5b; } a.anchor-link { display: block; } a.anchor-link::after { display: none; } a.link-image::after { display: none; } /* --------Header/Top Nav-------- */ header { background-color: #fff; height: 100px; width: 100%; } .logo { padding: 15px 0; } nav { padding: 40px 0; float: right; } nav ul { list-style-type: none; text-align: right; float: right; margin: 0; padding: 0; } nav li { display: inline; padding: 2px; color: #005d91; font-size: 16px; } nav li:before { display: none; } nav a:hover { color: #00aecb; } /* --------Hero-------- */ .hero { position: relative; padding: 125px 0 125px 0; background: url(img/lp-hero-1.jpg) no-repeat; background-size:cover; background-position: center 20%; color: #fff; } .hero.subscribe { position: relative; padding: 125px 0 125px 0; background: url(img/lp-hero-2.jpg) no-repeat; background-size:cover; background-position: center 20%; color: #fff; } .hero.sessions { position: relative; padding: 125px 0 125px 0; background: url(img/lp-hero-3.jpg) no-repeat; background-size:cover; background-position: center 20%; color: #fff; } .hero h1 { font-size: 48px; margin-top: 10px; } .mobile h1 { color: #125687; font-weight: 400; font-size: 28px; } .mobile p { font-size: 14px; line-height: 24px; } .subtitle { font-size: 18px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; letter-spacing: .1em; color: #fff; background: #73ca14; padding: 10px 15px; display: inline-block; } .hero-text p { color: #fff; } .hero-text h3 { /*color: #a3d06a;*/ } /* --------Main Content-------- */ .main-content--text { padding-right: 40px; width: 60%; } img.pdf-thumb { width: 225px; margin: -30px 0 0 0; -ms-transform: rotate(6deg); -webkit-transform: rotate(6deg); transform: rotate(6deg); } p.intro-text { font-size: 22px; line-height: 30px; color: #125687; } .cta-callout { background: rgba(255, 255, 255, 0.7); /* White background with 70% opacity */ padding: 25px; margin: 0 0 20px 0; } .cta-callout p{ margin-bottom: 0; } p.subhead { margin: 30px 0 5px 0; color: #125687; } .col-lg-7.main-text {padding: 0 10px 0 50px;} /* --------Form-------- */ form { margin-top: 25px; padding: 0 30px 30px; } input[type=text], select { width: 100%; padding: 8px; margin: 0 0 10px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 15px; } input[type=submit] { background-color: #00aecb; color: white; padding: 14px 40px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; -webkit-transition: background-color .5s ease-out; -moz-transition: background-color .5s ease-out; -o-transition: background-color .5s ease-out; transition: background-color .5s ease-out; } input[type=submit]:hover { background-color: #125687; } label { color: #5e5f60; margin-bottom: 0; font-size: 14px; font-weight: 700; } .download-form { background: #fff; padding: 0; } .download-form h3 { color: #fff; font-size: 20px; font-weight: 500; } .form-header { background: #125687; padding: 30px 20px; text-align: center; } textarea, input.text, input[type="text"], input[type="button"], input[type="submit"], .input-checkbox { -webkit-appearance: none; border-radius: 0; } /* --------Value Prop Content-------- */ .valueprop { padding: 10px 30px; } .valueprop:nth-child(n+2) { border-left: 1px solid #ebebeb; } .valueprop p { text-align: center; font-size: 15px; line-height: 25px; } .valueprop h3 { color: #00aecb; text-transform: uppercase; margin-bottom: 20px; margin-top: 1.5em; } .valueprop-content h2 { margin-bottom: 50px; } section.background-white.valueprop-content { padding: 60px 20px; } section.background-white.valueprop-content h3 { color: #00aecb; text-transform: uppercase; margin-bottom: 20px; margin-top: 1.5em; font-family: Averta-Bold, sans-serif; } .verticalLine { border-left: 1px solid red; } /* --------Events-------- */ section.events { padding: 60px 0; } .thead-blue { background-color: #00aecc; color: #fff; } /* --------Footer-------- */ .container-fluid--footer { margin-right: auto; margin-left: auto; padding-left: 25px; padding-right: 25px; max-width: 800px; } .page-footer { background-color: #125687; bottom: 0; margin: 0; padding: 60px 0; } .footer-info { display: inline; } .footer-1 { text-align: center; } .footer-2 { text-align: center; } .footer-1 h3, .footer-2 h3, .footer-1 p, .footer-2 p, .footer-1 a, .footer-2 a { color: #fff; } .footer-nav { padding-top: 60px; text-align: center; margin: 0 auto; } .footer-nav ul { list-style-type: none; text-align: center; margin: 0; padding: 0; } .footer-nav li { display: inline; padding: 0; font-size: 14px; } .footer-nav li:before { display: none; } .footer-nav li:after { content: "|"; color: #a7a298; padding: 0 10px; } .footer-nav li:nth-last-child(1):after { display: none; } .footer-nav a { color: #fff; } .copyright { font-size: 14px; padding-top: 15px; margin: 0; color: #fff; } /* --------Font Awesome Styles-------- */ @font-face { font-family: 'FontAwesome'; src: url('fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-twitter-square:before { content: "\\f081"; } .fa-rss-square:before { content: "\\f143"; } .fa-linkedin-square:before { content: "\\f08c"; } i.fa.fa-rss-square, i.fa.fa-linkedin-square, i.fa-twitter-square, i.fa-facebook-square { font-size: 20px; color: #00aecb; } .fa-facebook-square:before { content: "\\f082"; } i.fa:hover { color: #125687; } a.social-icon::after { background-color: #fff !important; content: none; } /* --------Media Queries-------- */ @media (max-width: 1024px){ input[type=submit] {padding: 14px 25px;} h1 {font-size: 32px;} .hero h1 {font-size: 38px;} h2 {font-size: 25px;} } @media (min-width: 901px) { section.main-content>div.container-fluid { display: flex; flex-direction: row-reverse; } } @media (max-width: 991px){ img.img-responsive.text-img {padding: 0 0 20px 0;} .col-lg-7.main-text {padding: 0 20px;} } @media (max-width: 900px){ input[type=submit] {padding: 14px 40px;} section.background-grey { padding: 40px 0 30px 0; } .main-content--text { padding: 0; width: 100%; } h1 {font-size: 30px;} .subtitle { font-size: 16px; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #007caa; opacity: 0.6; } .col-sm-6.hero-text { flex: 80%; max-width: 80%; } } @media (max-width: 767px){ .valueprop:nth-child(n+2) { border-left: none; } .hero, .hero.sessions, .hero.subscribe { padding: 80px 0 70px 0; } img.pdf-thumb { width: 200px; margin: -20px 0 0 0; } } @media (max-width: 580px){ .hero, .hero.sessions, .hero.subscribe {padding: 48px 0 38px 0} nav li { padding: 0 3px; } header { height: inherit; } .col-sm-6.hero-text { flex: 100%; max-width: 100%; } header .container-fluid { text-align: center; } nav { padding: 10px 0 20px 0; float: none; } nav ul { float: none; text-align: center; } .logo { width: 65%; padding: 15px 0 0; } .hero h1 {font-size: 26px;} .hero h3 {font-size: 16px;} h1 {font-size: 26px;} .subtitle { font-size: 14px; } .btn { width: 100%; } h2 {font-size: 22px;} section.background-grey, section.background-white, section.events {padding: 30px 0 20px 0;} section.background-white.valueprop-content {padding: 40px 20px;} input[type=submit] {padding: 14px 25px;} form {padding: 0 20px 30px;} .download-form h3 {font-size: 16px;} img.pdf-thumb { width: 150px; margin: -10px 0 0 0; } } @media (max-width: 460px){ img.pdf-thumb { width: 150px; margin: 10px 0 0 0; } } @media (max-width: 360px){ .hero { /*background: url(img/hero-1-xsm.jpg) no-repeat; background-size: cover;*/ } } @media (max-width: 320px){ .container, .container-fluid { padding-left: 20px; padding-right: 20px; } } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <section class="background-white valueprop-content"> <div class="container-fluid"> <div class="center"> <div class="row"> <div class="col-lg-3 valueprop"> <img class="valueprop-icon" src="img/session-icon.png" alt="session icon" style="max-width: 100%; height: auto;" /> <h3>Explore sessions</h3> <p>Tour Geneia's educational sessions which include topics such as AI, machine learning and SDoH.</p> <a class="btn btn-teal" href="explore-sessions.html" target="_blank">View sessions </a> </div> <hr class="d-block d-lg-none"> <div class="col-lg-3 valueprop"> <img class="valueprop-icon" src="img/meeting-icon.png" alt="meeting icon" style="max-width: 100%; height: auto;" /> <h3>Schedule a meeting</h3> <p>Request a meeting with on-site experts to learn more about our offerings and views demos.</p> <a class="btn btn-teal" href="mailto:geneia@geneia.com?subject=Schedule a meeting at HIMSS" target="_blank">Request a meeting</a></div> <hr class="d-block d-lg-none"> <div class="col-lg-3 valueprop"> <img class="valueprop-icon" src="img/email-icon.png" alt="email icon" style="max-width: 100%; height: auto;" /> <h3>Connect with us</h3> <p>Stay up-to-date on our activities, including HIMSS19</p> <br class="d-none d-sm-block"> <a class="btn btn-teal" href="form.html" target="_blank">Sign up</a> </div> <hr class="d-block d-lg-none"> <div class="col-lg-3 valueprop"> <img class="valueprop-icon" src="img/find-icon.png" alt="find icon" style="max-width: 100%; height: auto;" /> <h3>Find us at HIMSS</h3> <p>Explore our solutions and services at booth 541 in the exhibit hall.</p> <br class="d-none d-sm-block"> <a class="btn btn-teal" href="https://himss19.mapyourshow.com/7_0/floorplan/index.cfm?hallID=S&selectedBooth=booth~541" target="_blank">Locate our booth</a> </div> </div> </div> </div> </section> 

Answer 1

使用Flexbox在div中均勻分配項目。

  .col-lg-3 { display: flex; flex-direction: column; justify-content: space-between; }