尝试使用Bootstrap在后台保存文本

时间:2017-10-06 00:06:12

标签: html bootstrap-4

<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>

我正在尝试将此部分放在我正在创建的网站中。如您所见,我正在使用Bootstrap网格系统来确保文本仅在某个框内。问题是文本仍然填满整个页面,因此Bootstrap似乎不起作用。也许我做得不对。

1 个答案:

答案 0 :(得分:0)

你是否在头文件中包含了引导程序4和fontawesome css文件以及jquery?

内容仅在引导网格布局中显示。请参阅下面的代码和fiddle并检查bootstrap css和js文件的版本

<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>