頂部的bootstrap popover在div內切斷

Question

我有一個充滿按鈕的桌子，左邊有彈出窗口，桌子是手風琴。 問題是如果從表格的頂部生成彈出窗口，則彈出窗口會被切斷。 如何通過像素仍然在左側手動定位彈出窗口，或者讓它顯示在頂部（在div之外）。

這是我的HTML：

<body>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
       <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <div class = "testTable">
            <table class = "table table-striped">
            <tr><td>Test1</td>
            <td>         
                <div class = "td-container">
                    <div class ="btn-group btn-broup-sm">
                        <button id="elem" class="btn btn-danger" data-trigger="click">
                            Click for popover</button>
                    </div></div></td></tr>
            <tr>
                <td>Test3</td>
                <td>Test3</td>
            </tr>
            <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
            <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
            <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
                <tr><td>Test4</td>
                <td>Test5</td>
            </tr>
        </table>
        </div>
        </div>
        </div>

         <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Test text
      </div>
    </div>
  </div>
<body>

這是我的CSS：

.well {
    margin-top: 40px;
}

.testTable{
    height: 200px;
    overflow: auto;
}

table{
    height: 200px;
    text-align:center;
}

使用Javascript：

$('#elem').popover({placement:"left",
                    container:".td-container",
                    html: true,
                    title: "Test popover",
                    content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quism."});

Answer 1

將容器作為主體

$('#elem').popover({placement:"left",
                    container:"body",
                    html: true,
                        title: "Test popover",
                        content:"Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quism."});

Answer 2

您可以使用data-container屬性指定容器，也可以在JavaScript中執行。

$('#elem').popover({placement:"left",
                    container:".td-container",
                    html: true,
                    title: "Test popover",
                    container: "body",
                    content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quism."});

發現自： https ： //stackoverflow.com/a/15981951/2527231

頂部的bootstrap popover在div內切斷

問題描述

2 個解決方案

解決方案1
3 2015-05-07 19:08:37

解決方案2
0 2015-05-07 19:04:04

頂部的bootstrap popover在div內切斷

問題描述

2 個解決方案

解決方案1 3 2015-05-07 19:08:37

解決方案2 0 2015-05-07 19:04:04

解決方案1
3 2015-05-07 19:08:37

解決方案2
0 2015-05-07 19:04:04