关于html5的一段代码问题（使用span分栏）-php教程-PHP中文网

关于html5的一段代码问题（使用span分栏）

WBOY

发布： 2016-06-06 20:10:44

原创

1491 人浏览过

<code>


<meta charset="utf-8">
<mata name="viewport" contennt="width=device-width,initial-scale=1.0">
<title>Bootstrap_Project</title>
<link href="../bootstrap-3.3.5/dist/css/bootstrap.css" rel="stylesheet">



<div class="container">
  <h1 class="page-header">布局<small>毕设项目</small>
</h1>
  <p>hello world</p>
  <div class="row">
    <div class="span4">
      <h2 class="page-header">区块1</h2>
      <p> 这个是一个test</p>
    </div>
    <div class="span4">
      <h2 class="page-header">区块2</h2>
      <p> 这个是一个test</p>
    </div>
    <div class="span4">
      <h2 class="page-header">区块3</h2>
      <p> 这个是一个test</p>
    </div>
  </div>
</div>
<script src="../bootstrap-3.3.5/dist/js/bootstrap.js"></script> 
<script src="../bootstrap-3.3.5/dist/js/jquery-2.2.3.min.js"></script>


</mata></code>

登录后复制

初学html代码，按照教程使用了div class=span4，因为整个页面是12span，试图用span4将3个标题栏分成3个竖向排列栏，然而保存刷新在搜狗和chrome浏览器打开之后发现并没有效果，使用的是bootstrap，求大神帮我分析下错在哪，thx！图片所示为预期图和实际图

关于html5的一段代码问题（使用span分栏）

回复内容：

<code>


<meta charset="utf-8">
<mata name="viewport" contennt="width=device-width,initial-scale=1.0">
<title>Bootstrap_Project</title>
<link href="../bootstrap-3.3.5/dist/css/bootstrap.css" rel="stylesheet">



<div class="container">
  <h1 class="page-header">布局<small>毕设项目</small>
</h1>
  <p>hello world</p>
  <div class="row">
    <div class="span4">
      <h2 class="page-header">区块1</h2>
      <p> 这个是一个test</p>
    </div>
    <div class="span4">
      <h2 class="page-header">区块2</h2>
      <p> 这个是一个test</p>
    </div>
    <div class="span4">
      <h2 class="page-header">区块3</h2>
      <p> 这个是一个test</p>
    </div>
  </div>
</div>
<script src="../bootstrap-3.3.5/dist/js/bootstrap.js"></script> 
<script src="../bootstrap-3.3.5/dist/js/jquery-2.2.3.min.js"></script>


</mata></code>

登录后复制

关于html5的一段代码问题（使用span分栏）

你引进的是bootstrap-3.3.5，但是却用bootstrap2的写法，肯定没效果啦，
http://v3.bootcss.com/css/bootstrap3的文档在这里，你按照这个来写吧