Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/36.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
无法使用引导使html页面响应_Html_Css_Twitter Bootstrap_Twitter Bootstrap 3_Responsive Design - Fatal编程技术网

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

无法使用引导使html页面响应,html,css,twitter-bootstrap,twitter-bootstrap-3,responsive-design,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,Responsive Design,我试着做两个部分,叫做“开始”和“关于我们的反应”,我是一个使用引导的初学者,所以我犯了一些错误 我试图让“入门”部分正常工作,但按钮根本没有响应。在“关于我们”部分,我在笔记本电脑和手机上使用了两张图片,但即使这样也会产生一些问题,因为图片和图片的边距不一样,所以需要帮助 HTML代码: <section class="cont_1"> <div class="container"> <h2>Get started!</h2>

我试着做两个部分,叫做“开始”和“关于我们的反应”,我是一个使用引导的初学者,所以我犯了一些错误

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

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>
    .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;
    }
}

如果有一个非常简单的方法,只需引导类就可以使其响应,请确实帮助我,是否有可能只使用一个图像并使其响应大约我们?如果您想查看,这些文件也会附在附件中。

尝试用以下内容替换您的部分(续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>

开始吧!
现在您已经了解了流程,现在是查看最新报价的时候了。
只需5分钟即可获得ypur贷款或投资


你能在jsfiddle中添加代码吗?@HarshSanghani在顶部添加了下载文件,我在CSS上做了什么更改吗?因为这会影响itI,我试过了,但按钮还是贴得很近,唯一的办法是在手机视图上加上一个空白,但这会使它在手机视图上有很大的空白。你不需要在css级别上做任何更改。。“按钮仍然关闭”是什么意思?你想让这些按钮在手机上以相同的宽度显示吗?当我开始重新调整屏幕尺寸时,这些按钮连接在一起,你可以检查我上传的文件,当我从笔记本电脑转到平板电脑屏幕时,我需要按钮之间的空间。尝试在你的链接中使用“btn”css类进行借用和投资。。。“btn”是一个用于设置按钮样式的引导类