html - 我需要帮助创建 4 列，并在其下方一行两列

Question

所以，我正在尝试重新创建此布局 https://www.behance.net/gallery/44050271/BREAKFAST-Digital-Agencyhttps://www.behance.net/gallery/57588821/Ekko .

我正在尝试创建价格部分。

我尝试了一些不同的东西。我知道我可以通过向左移动一点来修复这个布局；但是，它会在其他屏幕上中断。有没有办法让“取得联系”按钮与大屏幕上的“订购”按钮完美对齐。

我目前正在使用 bootstrap。

这里是codepen，在这里输入代码
https://codepen.io/mulk-abdulhadi/pen/ROGKNB?editors=1100

<section class="prices container-fluid">
   <div class="row">
      <div class="col-sm-12 col-md-12 col-lg-12">
         <div class="prices_tap">
            <hr class="prices_hrsmall" />
            Website-prices
         </div>
      </div>
   </div>
   <div class="row prices_white mx-auto">
      <div class="col-sm-12 col-md-3 col-lg-3">
         <h3 class="prices_h3">Landing Pages</h3>
         <p class="prices_from">from</p>
         <p class="prices_price">250<span class="money">$</span></p>
         <a href="#" class="btn_order">ORDER</a>
      </div>
      <div class="col-sm-12 col-md-3 col-lg-3">
         <h3 class="prices_h3">BLOGS</h3>
         <p class="prices_from">from</p>
         <p class="prices_price">300<span class="money">$</span></p>
         <a href="#" class="btn_order">ORDER</a>
      </div>
      <div class="col-sm-12 col-md-3 col-lg-3">
         <h3 class="prices_h3">Corporate</h3>
         <p class="prices_from">from</p>
         <p class="prices_price">400<span class="money">$</span></p>
         <a href="#" class="btn_order">ORDER</a>
      </div>
      <div class="col-sm-12 col-md-3 col-lg-3">
         <h3 class="prices_h3">ECOMMERCE</h3>
         <p class="prices_from">from</p>
         <p class="prices_price">800<span class="money">$</span></p>
         <a href="#" class="btn_order">ORDER</a>
      </div>
      <div class="container">
         <div class="row">
            <div class="col-sm-10 col-md-8 col-lg-8 touch">
               <hr/>
               If you want to order a particular technology (UI/UX or Developer OR ETC) - feel free to get touch with us!
            </div>
            <div class="col-sm-2 col-md-3  col-lg-3 touch">
               <a href="#" class="btn_order btn_order-touch">Get in touch</a>
            </div>
         </div>
      </div>
   </div>
   </div>
</section>







$color-black: #0b0d0c;
$color-grey: grey;
$color-white: #fff;
$color-offwhite: #f6f6f6;
$boxshadow-button: 0 2px 5px rgba(0, 0, 0, 0.2);
$H2: 2.5rem;
@mixin clearfix {
content: "";
clear: both;
display: table;
}
@mixin btn_style {
text-decoration: none;
border-width: 0.1rem;
border-style: solid;
padding: 1rem;
text-transform: uppercase;
}
@mixin hr_tap {
border-bottom: 1rem;
border-color: #f6f6f6;
display: inline-block;
width: 7rem;
vertical-align: middle;
margin-left: 25px;
}
@mixin hr_text {
color: $color-offwhite;
text-transform: uppercase;
margin-top: 3rem;
font-weight: 100;
}
.prices {
color: $color-black;
background: url("../../Images/office.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-bottom: 12rem;
&_tap {
@include hr_text;
float: left;
}
&_hrsmall {
@include hr_tap;
text-transform: uppercase;
color: $color-offwhite;
}
&_white {
color: $color-black;
background-color: $color-offwhite;
text-align: center;
text-transform: uppercase;
position: relative;
top: 5rem;
padding-right: 3rem;
padding-left: 3rem;
padding-top: 3rem;
padding-bottom: 4rem;
}
h3 {
font-size: 2rem;
font-weight: 400;
margin-top: 3rem;
margin-bottom: 1rem;
}
&_from {
font-size: 1rem;
}
&_price {
font-size: 3rem;
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
a {
@include btn_style;
color: $color-black;
max-width: 100%;
display: inline-block;
width: 15rem;
}
.touch {
text-align: left;
text-transform: none;
font-size: 1rem;
}
}
.btn_order-touch {
font-size: 1.5rem;
display: inline-block;
text-align: center;
}

Answer 1

一些事情:

• 看起来您的第一个或第二个 div 行中的一个没有关闭，这会丢弃它下面的所有内容。
• 此行引起了一些问题，因此我将其删除。 <div class="container"> .同时删除关闭的 div。
• 带有“col-md-8”的行应该是“col-md-9”，因为带有“取得联系”按钮的列有“col-md-3”。 8 加 3 等于 11 您需要某些列等于 12。
• 带有“取得联系”按钮的行类缺少“prices_white mx-auto”

请参阅下面的代码。

   <section class="prices container-fluid">
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12">
                <div class="prices_tap">
                    <hr class="prices_hrsmall" />
                    Website-prices
                </div>
            </div>
        </div>
        <div class="row prices_white mx-auto">
            <div class="col-sm-12 col-md-3 col-lg-3">
                <h3 class="prices_h3">Landing Pages</h3>
                <p class="prices_from">from</p>
                <p class="prices_price">250<span class="money">$</span></p>
                <a href="#" class="btn_order">ORDER</a>
            </div>
            <div class="col-sm-12 col-md-3 col-lg-3">
                <h3 class="prices_h3">BLOGS</h3>
                <p class="prices_from">from</p>
                <p class="prices_price">300<span class="money">$</span></p>
                <a href="#" class="btn_order">ORDER</a>
            </div>
            <div class="col-sm-12 col-md-3 col-lg-3">
                <h3 class="prices_h3">Corporate</h3>
                <p class="prices_from">from</p>
                <p class="prices_price">400<span class="money">$</span></p>
                <a href="#" class="btn_order">ORDER</a>
            </div>
            <div class="col-sm-12 col-md-3 col-lg-3">
                <h3 class="prices_h3">ECOMMERCE</h3>
                <p class="prices_from">from</p>
                <p class="prices_price">800<span class="money">$</span></p>
                <a href="#" class="btn_order">ORDER</a>
            </div>
        </div>

            <div class="row prices_white mx-auto">
                <div class="col-sm-12 col-md-9 col-lg-9">
                    <hr />
                    If you want to order a particular technology (UI/UX or Developer OR ETC) - feel free to get touch
                    with us!
                </div>

                <div class="col-sm-12 col-md-3 col-lg-3">
                    <a href="#" class="btn_order btn_order-touch">Get in touch</a>
                </div>
            </div>


    </section>