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 个答案: