使用bootstrap

时间:2015-12-31 08:27:59

标签: html css twitter-bootstrap twitter-bootstrap-3 responsive-design

我正在尝试制作两个部分,开始使用,关于我们的响应,我是使用bootstrap的初学者,所以我犯了一些错误。

我试图让get get部分工作,但按钮根本没有响应。关于我们部分,我使用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

1 个答案:

答案 0 :(得分: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>