无法使用引导程序使 html 页面响应

Question

我正在尝试将两个部分称为“入门”和“关于我们的响应”，而且我是使用引导程序的初学者，所以我犯了一些错误。

我尝试让“入门”部分正常工作，但按钮根本没有响应。关于我们部分，我为笔记本电脑和手机使用了 2 张图片，但即使这样也会产生一些问题，因为图片和图片的边距并不相同，所以需要帮助。

HTML 代码：

   <section class="cont_1">
  <div class="container">
    <h2>Get started!</h2>
    <div class="row">
      <div class="col-md-7">
        <p>Now that you now the process it's time to check out recent offer.
          it only take 5 min to get ypur loan or invest</p>
      </div>
      <div class="col-md-1"></div>
      <div class="col-xs-6 col-md-2 borrow"> <a href="#">Borrow</a> </div>
      <div class="col-xs-6 col-md-2 borrow"> <a style="background-color:#fff; color:#66cccc; border: 1px solid #66cccc;" href="#">invest</a> </div>
    </div>
  </div>
</section>

    <section class="about">
  <div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="about_tx">
        <h4>About Us</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      </div>
    </div>
    <div class="col-md-6"> <img src="img/corporate3.jpg"> </div>
    </div>
  </div>
  <div class="about_tx"> <img src="img/corporate3.jpg"> </div>
</section>

CSS：

    .cont_1 {
    float: left;
    width: 100%;
    color: #676767;
    padding: 82px 0px;
    border-bottom: 2px solid #eeeeee;
    border-top: 2px solid #eeeeee;
}
.cont_1 h2 {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 25px;
    font-weight: 600;
}
.cont_1 .col-md-7 p {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 23px;
}
/*.cont_1 .col-md-2 a{font-family: 'Lato', Helvetica, Arial, sans-serif; font-size:28px;background:#66cccc; color:#FFF;padding:14px 30px 17px 37px; display:block; margin-bottom:10px;}
.cont_1 .col-md-2:last-child a {background: #fff; border: 1px solid #66cccc; color: #66cccc; display:block;}*/

.cont_1 .col-md-2 a {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 28px;
    background: #66cccc;
    color: #FFF;
    padding: 6px 40px;
    float: left;
    margin-bottom: 10px;
    text-transform: capitalize;
    border: 1px solid #fff;
}
.cont_1 .col-md-2 a:hover {
    background: #fff;
    border: 1px solid #66cccc;
    color: #66cccc;
}

/******************************
*******************************
*********ABOUT US***************
*******************************
******************************/

.about {
    float: left;
    position: relative;
    width: 100%;
}
.about_tx {
    width: 100%;
    float: left;
    text-align: left;
    margin-bottom: 25px;
}
.about_tx h4 {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 25px;
    color: #666;
    font-weight: 600;
    margin-top: 45px;
    margin-bottom: 35px;
}
.about_tx p {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 18px;
    color: #666;
    font-weight: 400;
    margin: 0;
}
.about_tx img {
    width: 100%;
    height:80%;
    float: left;
}
.about_tx img:last-child {
    margin-top: 113px;
}
.about img {
    bottom: 0;
    position: absolute;
    right: 0;
    width: 49%;
}
.about .col-md-6 img {
    display: none;
}

/******************************
*******************************
*********RESPONSIVE DIV********
*******************************
******************************/

@media only screen and (max-width: 1024px) {

    .borrow {
        width: auto;
        padding: 0;
    }

}
@media only screen and (max-width: 992px) {
    .about img {
        display: none;
    }
    .about .col-md-6 img {
        display: block;
        float: left;
        position: relative;
        width: 100%;
    }

}
@media only screen and (max-width: 980px) {
    .col-md-2 > a {
        display: block;
        margin: 0 10px 0 0;
    }
}
@media only screen and (max-width: 768px) {

    .copy_tx p {
        text-align: center;
    }
    .sm {
        text-align: center;
    }
}
@media only screen and (max-width: 480px) {

}
@media only screen and (max-width: 320px) {
    .cont_1 .col-md-2 a {
        padding: 6px 25px;
    }
}

如果有一种非常简单的方法可以仅通过引导类使其响应，请帮帮我，是否可以仅使用一张图像并使其对我们做出响应？并且文件也附上，如果你想看看的话。File

Answer 1

尝试将您的部分 (cont_1) 替换为以下内容：

<section class="cont_1">
  <div class="container">
    <h2>Get started!</h2>
    <div class="row">
    <div class="col-md-12">
      <div class="col-md-7">
        <p>Now that you now the process it's time to check out recent offer.
          it only take 5 min to get ypur loan or invest</p>
      </div>
      <div class="col-md-2 borrow"> <a href="#">Borrow</a> </div>
      <div class="col-md-2 borrow"> <a style="background-color:#fff; color:#66cccc; border: 1px solid #66cccc;" href="#">invest</a> </div>  
    </div>
    </div>
  </div>
</section>