MarkItUp渲染問題與引導相結合

在集成了MarkItUp作爲編輯器的web界面中。但我有渲染問題：MarkItUp渲染問題與引導相結合

一方面內部（厚藍色）框架不適合外部（見下圖右側）。

另一方面，厚厚的藍色框架延伸到圖標欄。由此產生的問題是，您必須非常非常平滑地使用鼠標移動才能使用下拉菜單 - 如果您不這樣做，它們將很快失效。

對於澄清小提琴：

var mySettings = { 
 
\t markupSet: [ \t 
 
\t \t {name:'Size', key:'S', openWith:'[size=[![Text size]!]]', closeWith:'[/size]', dropMenu :[ 
 
      {name:'Big', openWith:'[size=200]', closeWith:'[/size]' }, 
 
      {name:'Normal', openWith:'[size=100]', closeWith:'[/size]' }, 
 
      {name:'Small', openWith:'[size=50]', closeWith:'[/size]' } 
 
    ]}, 
 
    {name:'Size', key:'S', openWith:'[size=[![Text size]!]]', closeWith:'[/size]', dropMenu :[ 
 
      {name:'Big', openWith:'[size=200]', closeWith:'[/size]' }, 
 
      {name:'Normal', openWith:'[size=100]', closeWith:'[/size]' }, 
 
      {name:'Small', openWith:'[size=50]', closeWith:'[/size]' } 
 
    ]}, 
 
    {name:'Size', key:'S', openWith:'[size=[![Text size]!]]', closeWith:'[/size]', dropMenu :[ 
 
      {name:'Big', openWith:'[size=200]', closeWith:'[/size]' }, 
 
      {name:'Normal', openWith:'[size=100]', closeWith:'[/size]' }, 
 
      {name:'Small', openWith:'[size=50]', closeWith:'[/size]' } 
 
    ]}, 
 
    {name:'Size', key:'S', openWith:'[size=[![Text size]!]]', closeWith:'[/size]', dropMenu :[ 
 
      {name:'Big', openWith:'[size=200]', closeWith:'[/size]' }, 
 
      {name:'Normal', openWith:'[size=100]', closeWith:'[/size]' }, 
 
      {name:'Small', openWith:'[size=50]', closeWith:'[/size]' } 
 
    ]} 
 
\t ] 
 
} 
 

 

 

 

 
$(document).ready(function() \t { 
 
    $('#markitup').markItUp(mySettings); 
 
});

.markItUp .markItUpButton1 a { 
 
\t background-image:url(https://rawgit.com/markitup/1.x/master/markitup/sets/default/images/bold.png); 
 
} 
 

 
.markItUp .markItUpButton2 a { 
 
\t background-image:url(https://rawgit.com/markitup/1.x/master/markitup/sets/default/images/italic.png); 
 
} 
 
.markItUp .markItUpButton3 a { 
 
\t background-image:url(https://rawgit.com/markitup/1.x/master/markitup/sets/default/images/stroke.png); 
 
} 
 

 
.markItUp .markItUpButton4 a { 
 
\t background-image:url(https://rawgit.com/markitup/1.x/master/markitup/sets/default/images/list-bullet.png); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<link href="https://rawgit.com/markitup/1.x/master/markitup/skins/markitup/style.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/markitup/1.x/master/markitup/jquery.markitup.js"></script> 
 
<!--script src="https://rawgit.com/markitup/1.x/master/markitup/sets/default/set.js"></script--> 
 

 
<textarea id="markitup" cols="80" rows="20"></textarea>

我發現（通過連續不包括），該 'bootstrap.min.css'（3.3.7）導致上面的問題。但我不知道如何解決我的問題。

有沒有人有解決方案？

來源

2017-08-15 Rorschach

問題在於CSS屬性'box-sizing' - 它被設置爲'box-sizing：border-box'通過bootstrap。我通過添加'box-sizing：content-box'來解決我的問題。到相應的css文件中的類「markItUp」。

來源

2017-09-21 09:42:48 Rorschach

MarkItUp渲染問題與引導相結合

回答

相關問題