由于css文件，按钮是重叠的，即使使用bootstrap使它们响应也是如此

时间：2017-07-12 14:25:31

标签： html css twitter-bootstrap

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

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

] 1

1 个答案:

答案 0 :(得分：0)

我刚刚对您的代码进行了更改。

DEMO： https://jsfiddle.net/princesodhi/5ds3mLbh/

示例1

＆＃13;
＆＃13; 
   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;
   }
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

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

示例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;
}
相关问题
最新问题