Не удается просмотреть содержимое столбца - PullRequest
Новая
       2

Не удается просмотреть содержимое столбца

0 голосов
/ 13 июня 2018

Я только что начал в начальной загрузке и застрял в проблеме

Ниже приведен код 

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>

Ответы [ 2 ]

0 голосов
/ 13 июня 2018

collapse - это функция начальной загрузки, использующая JavaScript.Но вы не включаете библиотеку Bootstrap 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>
0 голосов
/ 13 июня 2018 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...