设置bootstrap popover的宽度不起作用

Question

我正在尝试创建包含表格的弹出窗口，但该表格正在弹出窗口外显示。尝试调整弹出窗口内容的宽度并不能解决问题。
为最大宽度宽度设置popover-content的样式并不能解决问题。有谁知道我怎么解决这个问题？

＆＃13;

＆＃13;

    $('[data-toggle=popover]').popover({
      container: 'body',
      html: true,
      content: function () {
        return $('#popover-content').html();
      }
    });

    

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<a href="#" class="mytooltip" data-toggle="popover" data-container="#wrap" data-trigger="hover" data-placement="auto right">
  <img src="\img\help.png" alt="?" style="width:20px;height:20px;border:0">
</a>

<div id="popover-content" class="hide" style="width: 800px; max-width: 100%;">
    <table style="width: 400px;">
		<thead>
			<tr>
				<th>heading 1</th>
				<th>heading 2</th>
				<th>heading 3</th>
				<th>heading 4</th>
			</tr>
        </thead>
	    <tbody>
			<tr>
				<td>Content row 1 col 1</td>
				<td>Content row 1 col 2</td>
				<td>Content row 1 col 3</td>
				<td>Content row 1 col 4</td>
			</tr>
		</tbody>
	</table>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

请包含css .popover {max-width：100％！important;}。一旦弹出图片，它会将popover类添加到所需的位置。所以你需要覆盖最大宽度值。

$('[data-toggle=popover]').popover({
      container: 'body',
      html: true,
      content: function () {
        return $('#popover-content').html();
      }
    });

.popover {
        max-width: 100% !important;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    

    <a href="#" class="mytooltip" data-toggle="popover" data-container="#wrap" data-trigger="hover" data-placement="auto right">
      <img src="http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/sea-gull-100219122.jpg" alt="?" style="width:20px;height:20px;border:0">
    </a>

    <div id="popover-content" class="hide" style="width: 800px; max-width: 100%;">
        <table style="width: 400px;">
    		<thead>
    			<tr>
    				<th>heading 1</th>
    				<th>


heading 2</th>
    				<th>heading 3</th>
    				<th>heading 4</th>
    			</tr>
            </thead>
    	    <tbody>
    			<tr>
    				<td>Content row 1 col 1</td>
    				<td>Content row 1 col 2</td>
    				<td>Content row 1 col 3</td>
    				<td>Content row 1 col 4</td>
    			</tr>
    		</tbody>
    	</table>
    </div>