Question

现在我无法找到如何让list-group工作。我想使用col-lg-9左侧的面板。在右侧有一个选择菜单，使用col-lg-3。

我不想这个选择菜单动态更改页面内容。因此，当我点击第1项时，面板会提供适用于第1项的信息。

到目前为止，我已经到了这里，但这还不行。

<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container'>
  <div class='row'>
    <div class='col-lg-9'>
      <div class='panel panel-default' id='panel1'>
        <div class='panel-body'>
          <div class='page-header'>
            <h3>The first panel <small>Posted on december 23 2015</small></h3>
          </div>
          <img class='featuredImg' src='resources/screenshot1.png'>
          <p>Another paragraph</p>
          <h4>This is a header</h4>
          <p>Paragraph to match this header</p>
        </div>
      </div>
      <div class='panel panel-default' id='panel2'>
        <div class='panel-body'>
          <div class='page-header'>
            <h3>This is panel two <small>Posted on december 24 2015</small></h3>
          </div>
          <p>This is a paragraph for panel two</p>
          <h4>This is a sub header for panel two</h4>
          <p>This is content belonging to subheading of panel two</p>
        </div>
      </div>
    </div>
    <div class='col-lg-3'>
      <div class='list-group'>
        <a href='#panel1' class='list-group-item active' data-toggle='tab'>
          <h4 class='list-group-item-heading'>Item 1</h4>
          <p class='list-group-item-text'>Short info about the item</p>
        </a>
        <a href='#panel2' class='list-group-item' data-toggle='tab'>
          <h4 class='list-group-item-heading'>Item 2</h4>
          <p class='list-group-item-text'>Short info about the item</p>
        </a>
      </div>
    </div>
  </div>
</div>

Answer 1

如果我理解正确，您需要将tabs和item-list组件合并。

像这样：

＆＃13;

<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container'>
  <div class='row'>
    <div class='col-lg-9 tab-content'>
      <div class='panel panel-default tab-pane active' id='panel1'>
        <div class='panel-body'>
          <div class='page-header'>
            <h3>The first panel <small>Posted on december 23 2015</small></h3>
          </div>
          <img class='featuredImg' src='resources/screenshot1.png'>
          <p>Another paragraph</p>
          <h4>This is a header</h4>
          <p>Paragraph to match this header</p>
        </div>
      </div>
      <div class='panel panel-default tab-pane' id='panel2'>
        <div class='panel-body'>
          <div class='page-header'>
            <h3>This is panel two <small>Posted on december 24 2015</small></h3>
          </div>
          <p>This is a paragraph for panel two</p>
          <h4>This is a sub header for panel two</h4>
          <p>This is content belonging to subheading of panel two</p>
        </div>
      </div>
    </div>
    <div class='col-lg-3'>
      <ul class='list-group'>
        <li class="list-group-item active">
          <a href='#panel1' data-toggle='tab'>
            <h4 class='list-group-item-heading'>Item 1</h4>
            <p class='list-group-item-text'>Short info about the item</p>
          </a>
        </li>
        <li class="list-group-item">
          <a href='#panel2' data-toggle='tab'>
            <h4 class='list-group-item-heading'>Item 2</h4>
            <p class='list-group-item-text'>Short info about the item</p>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

工作清单组引导程序

1 个答案: