在 bootstrap 轮播中渲染散景控件

Question

我在 bootstrap 旋转木马中有一个散景图，但散景控件显示在旋转木马控件的右侧。如果没有 bootstrap 旋转木马，散景图会根据需要呈现，散景控件会与图对齐。

我怎样才能强制散景控件位于旋转木马的内部，与情节齐平？

这是显示右上角散景控件的屏幕截图（红色矩形和箭头覆盖显示我期望控件的位置）：

这是一个例子：

http://htmlpreview.github.io/?https://github.com/jdimatteo/flask_bokeh_app/blob/carousel/bokeh_carousel.html

A fiddle: https://jsfiddle.net/ddrh3tx9/

这是内部轮播图：

        <div class="carousel-inner" role="listbox">
            <div class="item active" align="center">
                <h1>1</h1>
                <div class="bk-root">
                    <div class="plotdiv" id="327a612d-5699-4f1e-80bb-5acab5228f0a"></div>
                </div>
            </div>
            <div class="item" align="center">
                <h1>2</h1>
            </div>
        </div>

Answer 1

一种方法是添加：

CSS:

.bk-toolbar-wrapper.bk-layout-null{
      left: 100% !important;
      position: absolute;
}

Fiddle : https://jsfiddle.net/znqwu0c0/

根据屏幕尺寸，有时，散景控件可以位于轮播控件下方，因此为了仍然使它们可点击，您可以将其添加到轮播内部 class :

CSS

.carousel-inner{z-index: 1000;}

Fiddle : https://jsfiddle.net/znqwu0c0/1/

在 bootstrap 轮播中渲染散景控件

Render bokeh control inside bootstrap carousel

html

css

twitter-bootstrap

twitter-bootstrap-3

bokeh