文章/答案/技术大牛

发布

社区首页 >问答首页 >无法查看列的内容

问无法查看列的内容
EN

Stack Overflow用户

提问于 2018-06-13 07:04:30

回答 2查看 48关注 0票数 3

我刚开始自举，并陷入了一个问题。

下面是代码

doctype
html
    head
        meta(charset="utf-8")
        meta(name="viewport", content-width="device-width", initial-scale="1.0")
        title Example
        link(href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css", rel="stylesheet")
    body
        #row
            #container.col-md-4.col-lg-1.col-sm-4.col-xs-12
                <h4><a href="#col1Content" data-toggle="collapse">column1</a></h4>
                .collapse(id="col1Content") csfcsffsfsfcasfsdcsdfbvsfvbdfsfcasdfvhello

在输出中，我能够看到column1文本，但是当我单击它时，我无法看到我在它下面所写的内容。

为此打印html代码

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content-width="device-width" initial-scale="1.0"><title>RaspiEVSIM</title><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></head><body><div id="row"><div id="container" class="col-md-4 col-lg-1 col-sm-4 col-xs-12"><h4><a href="#col1Content" data-toggle="collapse">column1</a></h4><div id="col1Content" class="collapse">csfcsffsfsfcasfsdcsdfbvsfvbdfsfcasdfvhello</div></div></div></body></html>

html

twitter-bootstrap

bootstrap-4

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-13 07:22:15

collapse是一个使用JavaScript的引导功能。但是您没有包含引导JS和jQuery库，因此崩溃无法工作：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"><meta name="viewport" content-width="device-width" initial-scale="1.0">
    <title>RaspiEVSIM</title>
    
    <!-- the bootstrap CSS. -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- insert bootstrap js and jquery too. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="row">
      <div id="container" class="col-md-4 col-lg-1 col-sm-4 col-xs-12">
        <a href="#col1Content" data-toggle="collapse">column1</a>
        <a href="#list1Content" data-toggle="collapse">list1</a>
        <div id="col1Content" class="collapse">csfcsffsfsfcasfsdcsdfbvsfvbdfsfcasdfvhello</div>
        <ul id="list1Content" class="collapse"><li>first item</li><li>second item</li></ul>
        <hr>
        <ul id="list1Content">
          <li data-toggle="collapse" aria-controls="sub-list-1" data-target="#sub-list-1">first item (click me)</li>
          <ul class="collapse" id="sub-list-1">
            <li>first item (first level)</li>
            <li>second item (first level)</li>
          </ul>
          <li data-toggle="collapse" aria-controls="sub-list-2" data-target="#sub-list-2">second item (click me)</li>
          <ul class="collapse" id="sub-list-2">
            <li>first item (second level)</li>
            <li>second item (second level)</li>
          </ul>
        </ul>
      </div>
    </div>
  </body>
</html>

还有一个新版本的Bootstrap (4.1)：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"><meta name="viewport" content-width="device-width" initial-scale="1.0">
    <title>RaspiEVSIM</title>
    
    <!-- the bootstrap CSS. -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    
    <!-- insert bootstrap js and jquery too. -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="row">
      <div id="container" class="col-md-4 col-lg-1 col-sm-4 col-xs-12">
        <a href="#col1Content" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="col1Content">column1</a>
        <a href="#list1Content" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="list1Content">list1</a>
        <div id="col1Content" class="collapse">csfcsffsfsfcasfsdcsdfbvsfvbdfsfcasdfvhello</div>
        <ul id="list1Content" class="collapse"><li>first item</li><li>second item</li></ul>
        <hr>
        <ul id="list1Content">
          <li data-toggle="collapse" aria-controls="sub-list-1" data-target="#sub-list-1">first item (click me)</li>
          <ul class="collapse" id="sub-list-1">
            <li>first item (first level)</li>
            <li>second item (first level)</li>
          </ul>
          <li data-toggle="collapse" aria-controls="sub-list-2" data-target="#sub-list-2">second item (click me)</li>
          <ul class="collapse" id="sub-list-2">
            <li>first item (second level)</li>
            <li>second item (second level)</li>
          </ul>
        </ul>
      </div>
    </div>
  </body>
</html>

票数 2

Stack Overflow用户

发布于 2018-06-13 07:18:57

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Bootstrap 101 Template</title>

  <!-- Bootstrap -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <a data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Column1</a>
        <div class="collapse" id="collapseExample">
          <div class="well">
            Your Text Here
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50830974

复制

相似问题

问无法查看列的内容
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法查看列的内容EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法查看列的内容
EN