Question

我刚开始使用bootstrap并遇到问题

以下是代码

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>

Answer 1

＆＃13;

L = [pd.Series(np.arange(a, b)) for a, b in zip(df['start'], df['end'])]
s = pd.concat(L, keys=df.index)
print (s)
0  0    1
   1    2
   2    3
   3    4
   4    5
   5    6
1  0    2
   1    3
   2    4
   3    5
   4    6
   5    7
   6    8
2  0    3
   1    4
   2    5
   3    6
   4    7
   5    8
dtype: int32

＆＃13;

Answer 2

collapse是使用JavaScript的Bootstrap功能。但是你没有包含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>

无法查看列的内容

2 个答案: