Maison  >  Article  >  développement back-end  >  关于html5的一段代码问题(使用span分栏)

关于html5的一段代码问题(使用span分栏)

WBOY
WBOYoriginal
2016-06-06 20:10:441480parcourir

<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分栏)

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

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

关于html5的一段代码问题(使用span分栏)

关于html5的一段代码问题(使用span分栏)

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

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn