javascript - Bootstrap 4.1.1页脚中心对齐与右边框

Question

这是我的页脚设计

这是我基于Bootstrap 4.1.1的页脚设计代码

.mainfooter-area {
  background: #404044;
  padding: 100px 0;
}

.mainfooter-area h2 {
  color: #ffffff;
  font-family: "TrebuchetMS", sans-serif;
  font-size: 20px;
  margin-bottom: 25px;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  .mainfooter-area h2 {
    color: #ffffff;
    font-family: "TrebuchetMS", sans-serif;
    font-size: 18px;
    margin-bottom: 1em;
    letter-spacing: 1px;
  }
}

@media (max-width: 991px) {
  .mainfooter-area {
    padding: 50px 0;
  }
}

.ll-footer-about {
  position: relative;
}

.ll-footer-about:after {
  content: '';
  border-right: 1px solid #8b8b8b;
  position: absolute;
  right: 0;
  top: 20%;
  width: 1px;
  height: 80%;
}

.ll-footer-about p {
  text-align: justify;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 1.8em;
  color: #8b8b8b;
  font-weight: 300;
  width: 75%;
}

@media (max-width: 991px) {
  .ll-footer-about {
    margin-bottom: 50px;
  }
}

.ll-footer-ourcompany,
.ll-footer-faq {
  position: relative;
}

.ll-footer-ourcompany:after,
.ll-footer-faq:after {
  content: '';
  border-right: 1px solid #8b8b8b;
  position: absolute;
  right: 0;
  top: 20%;
  width: 1px;
  height: 80%;
}

.ll-footer-ourcompany a,
.ll-footer-faq a {
  position: relative;
  display: block;
  color: #8b8b8b;
  font-family: "Roboto", sans-serif;
  padding: 2px;
  font-size: 15px;
  margin-bottom: 10px;
  font-weight: 300;
  text-decoration: none;
  border-radius: 2px;
}

.ll-footer-ourcompany a::before,
.ll-footer-ourcompany a::after,
.ll-footer-faq a::before,
.ll-footer-faq a::after {
  display: inline-block;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
  -moz-transition: -moz-transform 0.3s, opacity 0.2s;
  transition: transform 0.3s, opacity 0.2s;
}

.ll-footer-ourcompany a::before,
.ll-footer-faq a::before {
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  transform: translateX(20px);
}

.ll-footer-ourcompany a::after,
.ll-footer-faq a::after {
  -webkit-transform: translateX(-20px);
  -moz-transform: translateX(-20px);
  transform: translateX(-20px);
}

.ll-footer-ourcompany a:hover::before,
.ll-footer-ourcompany a:hover::after,
.ll-footer-ourcompany a:focus::before,
.ll-footer-ourcompany a:focus::after,
.ll-footer-faq a:hover::before,
.ll-footer-faq a:hover::after,
.ll-footer-faq a:focus::before,
.ll-footer-faq a:focus::after {
  opacity: 1;
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  transform: translateX(0px);
}

.ll-footer-ourcompany a:hover,
.ll-footer-faq a:hover {
  text-decoration: none;
  color: #ffffff;
}

@media (max-width: 991px) {
  .ll-footer-ourcompany::after,
  .ll-footer-faq::after {
    border-right: none;
  }
  .ll-footer-ourcompany {
    margin-bottom: 50px;
  }
  .ll-footer-faq {
    margin-bottom: 50px;
  }
}

.ll-footer-newsletter p {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 1.8em;
  color: #8b8b8b;
  font-weight: 300;
  margin-bottom: 2em;
}

.ll-subscription {
  max-width: 100%;
  display: block;
}

@media (max-width: 768px) {
  .ll-subscription {
    max-width: 300px;
    display: block;
    padding-bottom: 20px;
    margin: auto;
  }
}

.ll-subscription form {
  font-family: "Roboto", sans-serif;
  border-radius: 30px;
}

.ll-subscription form button {
  border: none;
  font-size: 25px;
  padding: 3px 15px;
  /*gradient*/
  background: #ca4989;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(135deg, #ca4989, #df63c0 60%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(135deg, #ca4989, #df63c0 60%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
  font-family: "Roboto", sans-serif;
  color: #FFFFFF;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  cursor: pointer;
  -webkit-box-shadow: 0 0 1px #404044;
  box-shadow: 0 0 1px #404044;
}

.ll-flex {
  align-items: center;
  display: flex;
}

.ll-subscription form input {
  padding: 10px 18px;
  height: 43px;
  border-radius: 25px;
  font-family: "Roboto", sans-serif;
  color: #a2aebb;
  font-size: 15px;
  border: 1px solid #8b8b8b;
  border-right: none;
  width: 100%;
  background: transparent;
}

.ll-subscription form input:focus {
  outline: none;
}

.ll-socialmedia {
  margin-top: 30px;
  max-width: 300px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.ll-socialmedia a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
}

.ll-socialmedia a:hover {
  text-decoration: none;
  color: #ffffff;
}

.ll-socialmedia a.social-facebook {
  /*gradient*/
  background: #2156C2;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #2156C2, #5072BB 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #2156C2, #5072BB 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

.ll-socialmedia a.social-twitter {
  /*gradient*/
  background: #1B95E0;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #1B95E0, #1DA1F2 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #1B95E0, #1DA1F2 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

.ll-socialmedia a.social-instagram {
  /*gradient*/
  background: #DD4B3E;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #DD4B3E, #F11B07 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #DD4B3E, #F11B07 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

.ll-socialmedia a.social-googleplus {
  /*gradient*/
  background: #F90731;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #F90731, #AF1E37 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #F90731, #AF1E37 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

.ll-socialmedia a.social-pinterest {
  /*gradient*/
  background: #BD0A1D;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #BD0A1D, #AF1E37 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #BD0A1D, #AF1E37 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

@media (max-width: 768px) {
  .ll-socialmedia {
    display: flex;
    width: 100%;
    margin: auto;
  }
}

@media (max-width: 1200px) {
  .ll-footer-about {
    position: relative;
  }
  .ll-footer-about:after {
    content: '';
    border: 0;
    position: absolute;
    right: 0;
    top: 20%;
    width: 0;
    height: 0;
  }
  .ll-footer-about p {
    width: 100%;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="mainfooter-area">
  <div class="container-fluid">
    <div class="row mx-md-5">

      <div class="col-md-3 col-sm-12">
        <div class="ll-footer-about text-center text-md-left">
          <h2>About</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid animi aut cumque eligendi exercitationem molestiae molestias natus nisi odio officia perspiciatis quo repellendus saepe soluta sunt suscipit, tenetur! Commodi, distinctio.</p>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ducimus, odit tempora ullam Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, ipsam. Lorem ipsum dolor
            sit amet, consectetur adipisicing elit. Placeat, quas!
          </p>
        </div>
      </div>
      <div class="col-md-3 col-sm-12 text-center">
        <div class="ll-footer-ourcompany  text-left">
          <h2>Our Company</h2>
          <a href="">How to join us</a>
          <a href="">How it work</a>
          <a href="">Buying and Selling</a>
          <a href="">Testimonial</a>
          <a href="">Copyright Notice</a>
          <a href="">Refund Policy</a>
          <a href="">Affiliates</a>
        </div>
      </div>
      <div class="col-md-3 col-sm-12">
        <div class="ll-footer-faq">
          <h2>Help and Faq</h2>
          <a href="">How to join us</a>
          <a href="">How it work</a>
          <a href="">Buying and Selling</a>
          <a href="">Testimonial</a>
          <a href="">Copyright Notice</a>
          <a href="">Refund Policy</a>
          <a href="">Affiliates</a>
        </div>
      </div>
      <div class="col-md-3 col-sm-12 text-md-left text-center">
        <h2>Subscribe</h2>
        <div class="ll-footer-newsletter">
          <p>Subscribe to get the latest news, update and offer information. Don't worry, we won't send spam!
          </p>

          <!--Footer Newsletter Subscription-->
          <div class="ll-subscription">
            <form autocomplete="off" action="/subscribe" method="post">
              <div class="ll-flex">
                <div style="flex: 1 1 0;">
                  <input type="email" name="email" placeholder="[e-mail]">
                </div>
                <div style="margin-left: -20px;">
                  <button type="submit" disabled="disabled">&#8594;</button>
                </div>
              </div>
            </form>
          </div>
          <!--End Footer Newsletter Subscription-->

          <!--Footer Social Media-->
          <div class="ll-socialmedia">
            <a class="social-facebook" href=""><i class="fa fa-facebook"></i></a>
            <a class="social-twitter" href=""><i class="fa fa-twitter"></i></a>
            <a class="social-instagram" href=""><i class="fa fa-instagram"></i></a>
            <a class="social-googleplus" href=""><i class="fa fa-google-plus"></i></a>
            <a class="social-pinterest" href=""><i class="fa fa-pinterest-p"></i></a>
          </div>
          <!--End Footer Social Media-->

        </div>
      </div>
    </div>


  </div>
</div>

我面临一些基于右栏和中心对齐的问题，但文本是左对齐的。

谢谢

标签： javascripthtmlcssbootstrap-4

Answer 1

制作列 flex 容器（使用d-flex），然后您可以轻松地将内容居中（使用justify-content-center）。

我还调整了创建边框的伪元素：

.mainfooter-area {
  background: #404044;
  padding: 100px 0;
}

.mainfooter-area h2 {
  color: #ffffff;
  font-family: "TrebuchetMS", sans-serif;
  font-size: 20px;
  margin-bottom: 25px;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  .mainfooter-area h2 {
    color: #ffffff;
    font-family: "TrebuchetMS", sans-serif;
    font-size: 18px;
    margin-bottom: 1em;
    letter-spacing: 1px;
  }
}

@media (max-width: 991px) {
  .mainfooter-area {
    padding: 50px 0;
  }
}

.ll-footer-about:after {
  content: '';
  border-right: 1px solid #8b8b8b;
  position: absolute;
  right: 0;
  top: 10%;
  width: 1px;
  height: 80%;
}

.ll-footer-about p {
  text-align: justify;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 1.8em;
  color: #8b8b8b;
  font-weight: 300;
  width: 75%;
}

@media (max-width: 991px) {
  .ll-footer-about {
    margin-bottom: 50px;
  }
}

.ll-footer-ourcompany,
.ll-footer-faq {
}

.ll-footer-ourcompany:after,
.ll-footer-faq:after {
  content: '';
  border-right: 1px solid #8b8b8b;
  position: absolute;
  right: 0;
  top: 10%;
  width: 1px;
  height: 80%;
}

.ll-footer-ourcompany a,
.ll-footer-faq a {
  position: relative;
  display: block;
  color: #8b8b8b;
  font-family: "Roboto", sans-serif;
  padding: 2px;
  font-size: 15px;
  margin-bottom: 10px;
  font-weight: 300;
  text-decoration: none;
  border-radius: 2px;
}

.ll-footer-ourcompany a::before,
.ll-footer-ourcompany a::after,
.ll-footer-faq a::before,
.ll-footer-faq a::after {
  display: inline-block;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
  -moz-transition: -moz-transform 0.3s, opacity 0.2s;
  transition: transform 0.3s, opacity 0.2s;
}

.ll-footer-ourcompany a::before,
.ll-footer-faq a::before {
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  transform: translateX(20px);
}

.ll-footer-ourcompany a::after,
.ll-footer-faq a::after {
  -webkit-transform: translateX(-20px);
  -moz-transform: translateX(-20px);
  transform: translateX(-20px);
}

.ll-footer-ourcompany a:hover::before,
.ll-footer-ourcompany a:hover::after,
.ll-footer-ourcompany a:focus::before,
.ll-footer-ourcompany a:focus::after,
.ll-footer-faq a:hover::before,
.ll-footer-faq a:hover::after,
.ll-footer-faq a:focus::before,
.ll-footer-faq a:focus::after {
  opacity: 1;
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  transform: translateX(0px);
}

.ll-footer-ourcompany a:hover,
.ll-footer-faq a:hover {
  text-decoration: none;
  color: #ffffff;
}

@media (max-width: 991px) {
  .ll-footer-ourcompany::after,
  .ll-footer-faq::after,
  .ll-footer-about::after{
    border-right: none;
  }
  .ll-footer-ourcompany {
    margin-bottom: 50px;
  }
  .ll-footer-faq {
    margin-bottom: 50px;
  }
}

.ll-footer-newsletter p {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 1.8em;
  color: #8b8b8b;
  font-weight: 300;
  margin-bottom: 2em;
}

.ll-subscription {
  max-width: 100%;
  display: block;
}

@media (max-width: 768px) {
  .ll-subscription {
    max-width: 300px;
    display: block;
    padding-bottom: 20px;
    margin: auto;
  }
}

.ll-subscription form {
  font-family: "Roboto", sans-serif;
  border-radius: 30px;
}

.ll-subscription form button {
  border: none;
  font-size: 25px;
  padding: 3px 15px;
  /*gradient*/
  background: #ca4989;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(135deg, #ca4989, #df63c0 60%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(135deg, #ca4989, #df63c0 60%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
  font-family: "Roboto", sans-serif;
  color: #FFFFFF;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  cursor: pointer;
  -webkit-box-shadow: 0 0 1px #404044;
  box-shadow: 0 0 1px #404044;
}

.ll-flex {
  align-items: center;
  display: flex;
}

.ll-subscription form input {
  padding: 10px 18px;
  height: 43px;
  border-radius: 25px;
  font-family: "Roboto", sans-serif;
  color: #a2aebb;
  font-size: 15px;
  border: 1px solid #8b8b8b;
  border-right: none;
  width: 100%;
  background: transparent;
}

.ll-subscription form input:focus {
  outline: none;
}

.ll-socialmedia {
  margin-top: 30px;
  max-width: 300px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.ll-socialmedia a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
}

.ll-socialmedia a:hover {
  text-decoration: none;
  color: #ffffff;
}

.ll-socialmedia a.social-facebook {
  /*gradient*/
  background: #2156C2;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #2156C2, #5072BB 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #2156C2, #5072BB 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

.ll-socialmedia a.social-twitter {
  /*gradient*/
  background: #1B95E0;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #1B95E0, #1DA1F2 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #1B95E0, #1DA1F2 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

.ll-socialmedia a.social-instagram {
  /*gradient*/
  background: #DD4B3E;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #DD4B3E, #F11B07 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #DD4B3E, #F11B07 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

.ll-socialmedia a.social-googleplus {
  /*gradient*/
  background: #F90731;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #F90731, #AF1E37 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #F90731, #AF1E37 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

.ll-socialmedia a.social-pinterest {
  /*gradient*/
  background: #BD0A1D;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(180deg, #BD0A1D, #AF1E37 70%);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(180deg, #BD0A1D, #AF1E37 70%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*end gradient*/
}

@media (max-width: 768px) {
  .ll-socialmedia {
    display: flex;
    width: 100%;
    margin: auto;
  }
}

@media (max-width: 1200px) {
  .ll-footer-about p {
    width: 100%;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="mainfooter-area">
  <div class="container-fluid">
    <div class="row mx-md-5">

      <div class="col-md-3 col-sm-12 d-flex">
        <div class="ll-footer-about text-center text-md-left">
          <h2>About</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid animi aut cumque eligendi exercitationem molestiae molestias natus nisi odio officia perspiciatis quo repellendus saepe soluta sunt suscipit, tenetur! Commodi, distinctio.</p>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ducimus, odit tempora ullam Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, ipsam. Lorem ipsum dolor
            sit amet, consectetur adipisicing elit. Placeat, quas!
          </p>
        </div>
      </div>
      <div class="col-md-3 col-sm-12 d-flex justify-content-center">
        <div class="ll-footer-ourcompany ">
          <h2>Our Company</h2>
          <a href="">How to join us</a>
          <a href="">How it work</a>
          <a href="">Buying and Selling</a>
          <a href="">Testimonial</a>
          <a href="">Copyright Notice</a>
          <a href="">Refund Policy</a>
          <a href="">Affiliates</a>
        </div>
      </div>
      <div class="col-md-3 col-sm-12 d-flex justify-content-center">
        <div class="ll-footer-faq">
          <h2>Help and Faq</h2>
          <a href="">How to join us</a>
          <a href="">How it work</a>
          <a href="">Buying and Selling</a>
          <a href="">Testimonial</a>
          <a href="">Copyright Notice</a>
          <a href="">Refund Policy</a>
          <a href="">Affiliates</a>
        </div>
      </div>
      <div class="col-md-3 col-sm-12 text-md-left text-center">
        <h2>Subscribe</h2>
        <div class="ll-footer-newsletter">
          <p>Subscribe to get the latest news, update and offer information. Don't worry, we won't send spam!
          </p>

          <!--Footer Newsletter Subscription-->
          <div class="ll-subscription">
            <form autocomplete="off" action="/subscribe" method="post">
              <div class="ll-flex">
                <div style="flex: 1 1 0;">
                  <input type="email" name="email" placeholder="[e-mail]">
                </div>
                <div style="margin-left: -20px;">
                  <button type="submit" disabled="disabled">&#8594;</button>
                </div>
              </div>
            </form>
          </div>
          <!--End Footer Newsletter Subscription-->

          <!--Footer Social Media-->
          <div class="ll-socialmedia">
            <a class="social-facebook" href=""><i class="fa fa-facebook"></i></a>
            <a class="social-twitter" href=""><i class="fa fa-twitter"></i></a>
            <a class="social-instagram" href=""><i class="fa fa-instagram"></i></a>
            <a class="social-googleplus" href=""><i class="fa fa-google-plus"></i></a>
            <a class="social-pinterest" href=""><i class="fa fa-pinterest-p"></i></a>
          </div>
          <!--End Footer Social Media-->

        </div>
      </div>
    </div>


  </div>
</div>