Question

我试图用一个100％宽度的加载器div在bootstrap中溢出一个表。

我在这里做了一个小提琴：

以下是代码：

HTML：

<div class="container">
    <div class="row">
    <div class="col-md-12">
        <div id="loaderTable"></div>
        <table class="table-bordered table-striped table-condensed" width="100%">
            <thead>
                <th>Data inizio</th>
                <th>Ora inizio</th>
                <th>Data fine</th>
                <th>Ora fine</th>
                <th>Attività</th>
                <th>Struttura</th>
                <th>Dettagli</th>
                <th>Salva evento</th>
                <th>Stato</th>
            </thead>
            <tbody>
                <tr>
                    <td data-title="Data inizio" id="prest_data_inizio">12/04/2016</td>
                    <td data-title="Ora inizio" id="prest_ora_inizio">09:00</td>
                    <td data-title="Data fine" id="prest_data_fine">12/04/2016</td>
                    <td data-title="Ora fine" id="prest_ora_fine">18:00</td>
                    <td data-title="Attività" id="prest_attivita">Attività di ambulatorio</td>
                    <td data-title="Struttura" id="prest_struttura">6</td>
                    <td data-title="Dettagli" id="prest_dettagli"><a href="javascript:void(0);"><i class="fa fa-chevron-circle-down"></i></a></td>
                    <td data-title="Salva evento" id="prest_salva"><a href="javascript:void(0);"><i class="fa fa-calendar"></i></a></td>
                    <td data-title="Stato" id="prest_stato">9</td>
                </tr>
                <tr class="prest_dettagli_box">
                    <td data-title="Dettagli" colspan="9">
                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
                    </td>
                </tr>
            </tbody>
            <tfoot>
            </tfoot>
        </table>
    </div>
</div>
</div>

CSS：

#loaderTable {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    background: rgba(255, 0, 0, 0.5) url(http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif) no-repeat center center;
    top: 0;
  left: 0;
}

我不了解加载器div宽度行为（100％宽度），因为如果div嵌套在一行中且col-md-12不应该出去但可能我不明白在这种情况下，网格哲学。

有人可以建议我把这个装载器div放在我的桌子上方的正确方法正好填充宽度的100％吗？

Answer 1

我不太确定，不能理解这个问题。您希望装载机仅覆盖表格而不是div中的空格＆＃34; col-md-12＆＃34;。

如果这是您的问题，您必须添加另一种样式＆＃34; width＆＃34;和＆＃34; top＆＃34;装载机的风格，因为div＆＃34; col-md-12＆＃34;有＆＃34;填充权：15px; padding-left：15px;＆＃34;

＆＃13;

#loaderTable {
    width: calc(100% - 30px); 
    left: 15px;  
}

＆＃13;

Answer 2

发生这种情况是因为relative位置的父级是col-md-12而且他有padding:0 15px所以，你只需要用div包裹表并给它{{ 1}}

position:relative

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
#loaderTable {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10;
  background: rgba(255, 0, 0, 0.5) url(http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif) no-repeat center center;
  top: 0;
  left: 0;
}

.wrapper {
  position:relative;
}

找到具有100％宽度正确行为的Bootstrap div

2 个答案: