bootstrap是一個不錯的前端框架。這里寫一下使用中遇到過的幾點問題。

1.bootstrap的模態框modal的問題。  有時候會出現彈出模態框的時候遮罩把模態框遮住的情況。

出現這個問題的原因，多半是模態框的html代碼放置位置不對?？垂俜轿臋n。說明如下：

模態框的 HTML 代碼放置的位置

務必將模態框的 HTML 代碼放在文檔的最高層級內（也就是說，盡量作為 body 標簽的直接子元素），以避免其他組件影響模態框的展現和/或功能。

如果因為某種原因我們沒辦法把模態框的HTML代碼放到最高層級內，那么我們可以把它移動過去。

jQuery代碼：需要的話請自行翻譯成JavaSccipt代碼。

$(".modal").appendTo("body"); 

這個問題告訴我們 文檔很重要。

2.在使用bootstrap的同時使用地圖API的時候，可能會出現bootstrap與地圖沖突，地圖顯示不出來的情況。這里的問題主要是在使用bootstrap的變體ZUI的時候遇到的。

由于bootstrap有很多自身的css。所以有時候會跟地圖API產生一些沖突。導致地圖或者地圖里面的一些控件顯示不出來。我之前用天地圖WebAPI與ZUI的時候出現過地圖加載不出來的情況。

解決問題的過程：

1.打開瀏覽器的開發者工具，看console控制臺有無報錯。無有。看network中的資源，地圖相關的圖片資源無加載。有。

2.將地圖調用的代碼從項目中獨立出來，看能否正常顯示。能。

3.在項目中，使用二分法一半一半地刪除引用的js,css看是否這些js或css對天地圖API造成了影響。鎖定問題在zui.css。

4.在elements那里核對地圖那個div下面的一些css。最后發現這一句。

audio, canvas, img, svg, video {   max-width: 100%;   vertical-align: middle; } 

ok，問題解決，zui與天地圖webAPI的沖突出在 max-width:100%上。 修改成max-width:none; 地圖成功顯示。當然不是直接修改其源代碼，而是在對應div下面把那個屬性給覆蓋掉。

后來做運行軌跡的時候，發現標注Maker和線line都顯示不出來 的情況。經過與正常的對比。并且在控制臺查詢，發現標注和線是加載了的。只是沒有成功顯示而已。 原來是svg的問題。也是上面那句代碼的影響。修改了就能正常顯示了。

3.ZUI使用數據表格初始化不正常的問題。datatable.js。

ZUI中有一個很強大的數據表格插件?？梢詫祿砀竦谝涣羞M行排序操作。

按照官方文檔的說法，只要這一句就可以初始化表格插件，正常排序。

$('table.datatable').datatable({sortable: true}); 

但是我們的小伙伴在使用的時候，發現這一句并沒有任何作用，完全沒有達到范例中的排序效果。于是把這個問題交給我解決。

一開始肯定是懷疑小伙伴哪個地方接口沒調用對，然而，我自己試了一下，也沒有什么用。

于是繼續看接口，發現還有另一種初始化的方式，需要把數據自己拼成一個數組傳遞進去。

/* 使用啟動參數選項來初始化數據 */ $('table.datatable').datatable({   data: {     cols: [       {width: 80, text: '#', type: 'number', flex: false, colClass: 'text-center'},       {width: 160, text: '時間', type: 'date', flex: false, sort: 'down'},       {width: 80, text: '名稱', type: 'string', flex: true, colClass: ''}     ],     rows: [       {checked: false, data: [1, '2016-01-18 11:05:15', '名稱示例1']},       {checked: false, data: [2, '2016-01-20 12:06:16', '名稱示例2']},       // 更多數據     ]   },   // 其他啟動參數選項 }); 

我就拼了一個，發現可以正常初始化，達到了預期效果。   但是如果每次調用這個東西都要手工拼那么一大個數組出來，顯然是不劃算的。那么問題出在哪里呢？

于是斷點。進到源碼里去，發現兩種方式的不同在于一個有data傳入，一個沒有data傳入。而在源碼里對于沒有data的情況下的處理是自己根據表格的內容來生成data。

于是我將它生成的最終data使用console.log(JSON.stingify(data))出來，再用這個生成的data，使用第二種方式傳入data來初始化。發現不能正常使用功能。

于是將問題鎖定在這個 生成的data上面。

通過對比范例中的data，以及生成的data，發現居然不一樣。 范例中的data每一行的數據是一個數組包含的里面每一個格子里的內容，是直接量。而生成的data每一行的數據是一個數組包含的每一個格子的對象，對象中又包含了一些信息。這是差異所在。另外生成的表頭數據也有一些差異。

于是按照范例中的數據要求來修改源代碼，

cols.push($.extend( {   text: $th.html(),   flex: false || $th.hasClass('flex-col'),   width: 'auto',   cssClass: $th.attr('class'),   css: $th.attr('style'),   type: 'string',   ignore: $th.hasClass('ignore'),   sort: !$th.hasClass('sort-disabled'),   mergeRows: $th.attr('merge-rows') }, $th.data())); 

為

$t.find('thead > tr:first').children('th').each(function() {   $th = $(this);   cols.push($.extend(   {     text: $th.html(),     flex: false || $th.hasClass('flex-col'),     width: 'auto',     cssClass: $th.attr('class'),     colClass: $th.attr('class'),     css: $th.attr('style'),     type: 'string',     ignore: $th.hasClass('ignore'),     sort: !$th.hasClass('sort-disabled')   }, $th.data())); }); 

修改：

row.data.push($.extend( {   cssClass: $td.attr('class'),   css: $td.attr('style'),   text: $td.html(),   colSpan: colSpan }, $td.data())); 

為：

row.data.push($td.html()); 

測試

$('table.datatable').datatable({sortable: true}); 

成功初始化。排序可能正常。表格css正常。問題初步解決。

附：ZUI文檔：http://zui.sexy/

bootstrap文檔：http://v3.bootcss.com/javascript/

做前端的難免遇到各種各樣的問題。不要慌，一步步來，掌握了科學系統的發現問題和解決問題的方法，就能很快的鎖定問題進而解決問題了。

以上就是小編為大家帶來的淺談bootstrap使用中的一些問題以及解決過程全部內容了，希望大家多多支持武林網~