Wie kann ich die Schaltfläche an der Spitze beheben und den Inhalt in sie einklappen

Ich habe diesen Code versucht, aber wenn ich auf die Schaltfläche klicken, der Inhalt zusammenbricht und die Schaltfläche bewegt sich nach unten. Ich möchte, dass der Inhalt zusammenbricht und die Schaltfläche oben in der Zeile mit der anderen Schaltfläche bleibt.Wie kann ich die Schaltfläche an der Spitze beheben und den Inhalt in sie einklappen

Hier ist mein HTML und CSS-Code:

#fixed { 
 
    margin-top: 60px; 
 
} 
 
#block { 
 
    border: solid #BDC3C7 1px; 
 
    width: 360px; 
 
    margin-left: 60px; 
 
    display: inline-block; 
 
} 
 
.ab { 
 
    margin: 5px; 
 
} 
 
#demo { 
 
    max-width: 350px; 
 
    color: blue; 
 
    border: solid #ddd 1px; 
 
    padding: 5px 12px 0px 12px; 
 
    margin: 2px -10px 2px 0px; 
 
    vertical-align: top; 
 
    white-space: nowrap; 
 
    font-size: 12px; 
 
    text-align: left; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
} 
 
.list { 
 
    list-style: none; 
 
    border-bottom: solid 1px #eee 
 
} 
 
.as { 
 
    margin: 0 0 10px 0; 
 
    padding: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="style.css"> 
 

 
</head> 
 

 
<body data-spy="scroll" data-target=".navbar-collapse"> 
 

 
    <div class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a href="http://getbootstrap.com/getting-started/#template" target="_blank" class="navbar-brand">THINK</a> 
 
     </div> 
 
     <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#div1">About Us</a> 
 
      </li> 
 
      <li><a href="#div2">Contact Us</a> 
 
      </li> 
 
      <li><a href="#div3">Pricing</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="container"> 
 
    <div id="fixed"> 
 
     <div id="block"> 
 
     <div class="ab"> 
 
      <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button> 
 
      <div id="demo" class="collapse in"> 
 
      <ul class="as"> 
 
       <li class="list">hello</li> 
 
       <li class="list">hi</li> 
 
       <li class="list">hello</li> 
 

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

 
     </div> 
 

 
     <div id="block"> 
 
     <div class="ab"> 
 
      <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo1">Simple collapsible</button> 
 
      <div id="demo1" class="collapse in"> 
 
      <ul class="as"> 
 
       <li class="list">hello</li> 
 
       <li class="list">hi</li> 
 
       <li class="list">hello</li> 
 

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

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

 
</body> 
 

 
</html>

Quelle

2016-08-04 Kartik Sharma

die Blöcke eine Regel vertikal ausrichten Geben.

Auch nie eine HTML-ID duplizieren. Verwenden Sie stattdessen Klassen.

<!DOCTYPE html> 
 
<html> 
 

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

 
    <style> 
 
    #fixed { 
 
     margin-top: 60px; 
 
    } 
 
    /* Changed to class here */ 
 
    .block { 
 
     border: solid #BDC3C7 1px; 
 
     width: 360px; 
 
     margin-left: 60px; 
 
     display: inline-block; 
 
     /* added vertical-align */ 
 
     vertical-align: top; 
 
    } 
 
    .ab { 
 
     margin: 5px; 
 
    } 
 
    #demo { 
 
     max-width: 350px; 
 
     color: blue; 
 
     border: solid #ddd 1px; 
 
     padding: 5px 12px 0px 12px; 
 
     margin: 2px -10px 2px 0px; 
 
     vertical-align: top; 
 
     white-space: nowrap; 
 
     font-size: 12px; 
 
     text-align: left; 
 
     font-family: Arial, Helvetica, sans-serif; 
 
    } 
 
    .list { 
 
     list-style: none; 
 
     border-bottom: solid 1px #eee 
 
    } 
 
    .as { 
 
     margin: 0 0 10px 0; 
 
     padding: 0; 
 
    } 
 
    </style> 
 

 
</head> 
 

 
<body data-spy="scroll" data-target=".navbar-collapse"> 
 

 
    <div class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a href="http://getbootstrap.com/getting-started/#template" target="_blank" class="navbar-brand">THINK</a> 
 
     </div> 
 
     <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#div1">About Us</a> 
 
      </li> 
 
      <li><a href="#div2">Contact Us</a> 
 
      </li> 
 
      <li><a href="#div3">Pricing</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="container"> 
 
    <div id="fixed"> 
 
     <!-- changed "block" from id to class here --> 
 
     <div class="block"> 
 
     <div class="ab"> 
 
      <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button> 
 
      <div id="demo" class="collapse in"> 
 
      <ul class="as"> 
 
       <li class="list">hello</li> 
 
       <li class="list">hi</li> 
 
       <li class="list">hello</li> 
 

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

 
     </div> 
 
     <!-- changed "block" from id to class here --> 
 
     <div class="block"> 
 
     <div class="ab"> 
 
      <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo1">Simple collapsible</button> 
 
      <div id="demo1" class="collapse in"> 
 
      <ul class="as"> 
 
       <li class="list">hello</li> 
 
       <li class="list">hi</li> 
 
       <li class="list">hello</li> 
 

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

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

 
</body> 
 

 
</html>

Quelle

2016-08-04 22:46:22 MPawlak

Wie kann ich die Schaltfläche an der Spitze beheben und den Inhalt in sie einklappen

Antwort

Verwandte Themen