Bootstrap zu verwenden versuchen, Text in

Question

Hintergrund zu halten

<div class="container"> 
 
<div class="row"> 
 
<div class="col-lg-9"> 
 
    <h2 style="font-family:times-new-roman">BIOGRAPHY</h2> 
 
    <div id="demo" class="collapse"> 
 
    <p> 
 
Albert Einstein (14 March 1879 – 18 April 1955) was a German-born theoretical physicist.[5] Einstein developed the theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics).[4][6]:274 Einstein's work is also known for its influence on the philosophy of science.[7][8] Einstein is best known by the general public for his mass–energy equivalence formula E = mc2 (which has been dubbed "the world's most famous equation"). 
 
</p> 
 
    </div> 
 
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="color: black; background-color: transparent; border: none; font-color:black"> 
 
    <br> 
 
    <div class="text-center"> 
 
    <i class="fa fa-angle-double-down" style="font-size:36px;"></i> 
 
    </div> 
 
    </button> 
 
</div> 
 
<div class="col-lg-3"> 
 
</div> 
 
</div> 
 
</div>

Ich versuche, diesen Abschnitt in einer Website zu haben, ich bin zu schaffen. Wie Sie sehen können, verwende ich das Bootstrap-Grid-System, um sicherzustellen, dass der Text nur innerhalb einer bestimmten Box ist. Problem ist, dass der Text immer noch die gesamte Seite ausfüllt, so dass der Bootstrap nicht zu funktionieren scheint. Vielleicht mache ich etwas nicht richtig.

Answer 1

Haben Sie Bootstrap 4 und Fontawesome CSS-Dateien mit jquery im Header enthalten?

Inhalt wird nur im Bootstrap-Grid-Layout angezeigt. siehe meinen Code unten und fiddle und überprüfen Sie die Versionen von Bootstrap-CSS und JS-Dateien

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="row"> 
 
<div class="col-lg-9"> 
 
    <h2 style="font-family:times-new-roman">BIOGRAPHY</h2> 
 
    <div id="demo" class="collapse"> 
 
    <p> 
 
Albert Einstein (14 March 1879 – 18 April 1955) was a German-born theoretical physicist.[5] Einstein developed the theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics).[4][6]:274 Einstein's work is also known for its influence on the philosophy of science.[7][8] Einstein is best known by the general public for his mass–energy equivalence formula E = mc2 (which has been dubbed "the world's most famous equation"). 
 
</p> 
 
    </div> 
 
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="color: black; background-color: transparent; border: none; font-color:black"> 
 
    
 
    <br> 
 
    <div class="text-center"> 
 
    <i class="fa fa-angle-double-down" style="font-size:36px;"></i> 
 
    </div> 
 
    </button> 
 
</div> 
 
<div class="col-lg-3"> 
 
</div> 
 
</div> 
 
</div>