个人中心
gpt4 book ai didi

html - 由于 css 文件，按钮重叠，即使使用 Bootstrap 使它们响应

转载 作者：行者123 更新时间：2023-11-28 03:24:24 24 4
gpt4 key购买 nike

我必须在投资组合文本下方添加两个按钮，并使它们也具有响应性我使用 css 将它们制作在投资组合文本下方，但它影响了 Bootstrap 列，因此不再响应。下面是屏幕截图和代码。[查看列如何重叠导致我不想要的重叠按钮 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
body, html {
    height: 100%;
    margin: 0;
}

.bg {
    /* The image used */
    background-image: url("sunrise.jpg");

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.70;
}

.caption {
  position: absolute;
  left: 0;
  top: 40%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

.wrapper1 {
  position: absolute;
  top: 52%;
  left:50%;
  max-width:400px
}

.wrapper  {
  position: absolute;
  top: 52%;
  left:40%;
  max-width:400px}


</style>
</head>

<body>
<div class="bg"></div>
<div class="caption">
    <span class="border">PORTFOLIO</span><br>
</div>

<div class="container">
<div class="row">
  <div class="wrapper col-lg-6" style="border:1px solid;">
        <button style="font-size: 25px;" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Login</button>
  </div>
  <div class="wrapper1 col-lg-6" style="border:1px solid;">
  <button type="button" style="font-size: 25px;" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">Sign up</button>
  </div>
 </div> 
</div> 

  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Sign Up</h4>
        </div>
        <div class="modal-body">
           <form>
                <div class="form-group">
                <label for="email">Email address:</label>
                <input type="email" class="form-control" id="email">
                </div>
                <div class="form-group">
                <label for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd">
                </div>
                <div class="checkbox">
                <label><input type="checkbox"> Remember me</label>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form> 
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</body>
</html>

] 1

最佳答案

我刚刚更改了您的代码。

演示: https://jsfiddle.net/princesodhi/5ds3mLbh/

示例 1

   body,
   html {
     height: 100%;
     margin: 0;
   }
   
   .bg {
     /* The image used */
     background-image: url("sunrise.jpg");
     /* Full height */
     height: 100%;
     /* Center and scale the image nicely */
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     opacity: 0.70;
   }
   
   .caption {
     left: 0;
     top: 40%;
     width: 100%;
     text-align: center;
     color: #000;
     position: absolute;
   }
   
   .caption span.border {
     background-color: #111;
     color: #fff;
     padding: 18px;
     font-size: 25px;
     letter-spacing: 10px;
   }
   
   .wrapper1 {}
   
   .wrapper {}
   
   .newClass {}
   
   .newClass >.row {
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .newClass >.row button:first-child {
     margin-right: 10px;
   }
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>


    </style>
  </head>

  <body>
    <div class="bg"></div>
    <div class="caption">
      <span class="border">PORTFOLIO</span>
      <br>
      <div class="container newClass">

        <div class="row ">

          <button style="font-size: 25px;" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Login</button>


          <button type="button" style="font-size: 25px;" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">Sign up</button>

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



    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">

        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Sign Up</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="email">Email address:</label>
                <input type="email" class="form-control" id="email">
              </div>
              <div class="form-group">
                <label for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd">
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox"> Remember me</label>
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>

      </div>
    </div>

  </body>

</html>

这是你想要的吗？如果不是那么就告诉我你想如何显示按钮。

示例 2如果想在 portfilo 上使用按钮覆盖，则只需在我的代码中添加以下 css。

.caption span.border {
    background-color: #111;
    color: #fff;
    padding: 10px;
    font-size: 25px;
    letter-spacing: 10px;
    height: 60px;
    display: inline-block;
    margin-bottom: 10px;
}

关于html - 由于 css 文件，按钮重叠，即使使用 Bootstrap 使它们响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45060446/

24 4 0
文章推荐： javascript - 为 child 停用 angular2-draggable
文章推荐： javascript - Crypto++ 低级 AES API(a la SJCL)
文章推荐： c++ - 新建和删除混淆
文章推荐： javascript - Angular Material，存在值时禁用 float 标签
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com