MarkItUp 与 bootstrap 结合的渲染问题答案

【问题标题】：MarkItUp rendering problems in combination with bootstrapMarkItUp 与 bootstrap 结合的渲染问题
【发布时间】：2017-08-15 09:05:59
【问题描述】：

在网络界面中，我将MarkItUp 集成为编辑器。但我有渲染问题：

一方面，内部（厚蓝色）框架不适合外部框架（见下图右侧）。

另一方面，粗蓝框延伸到图标栏。由此产生的问题是，您必须非常、非常流畅地移动鼠标才能使用下拉菜单 - 如果您不这样做，它们会很快消失。

为了澄清一个小提琴：

var mySettings = {
	markupSet:  [ 	
		{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]' }
    ]}
	]
}




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

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

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

.markItUp .markItUpButton4 a {
	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）会导致上述问题。但我不知道如何解决我的问题。

有人有解决办法吗？

【问题讨论】：

标签： html css twitter-bootstrap rendering markitup

【解决方案1】：

问题在于 css 属性“box-sizing”——它被设置为“box-sizing:border-box;”通过引导程序。我通过添加 'box-sizing: content-box;' 解决了我的问题到相应css文件中的“markItUp”类。

【讨论】：