html - 无法在父行引导程序 4 和 VueJs 中获取两行
问题描述
我正在使用 VueJs 和 Boostrap4 创建一个组件,我想在其中使用 bootstrap 提供的类获得与此类似的设计
阅读文档,bootstrap 提供了定制的 h-75 和 h-25 类,我认为这已经足够了,但我没有得到想要的结果
Vue.component('listcontent', {
template: '<div class="w-100 h-75 bg-info">ds</div>'
})
Vue.component('datashared', {
template: ' <div class="w-100 h-25 bg-primary">dsadsa</div>'
})
Vue.component('maincomponent', {
template: `<div class="container h-100" >
<div class="row h-100">
<div class="col-md-5 h-100 border">
<listcontent></listcontent>
<datashared/></datashared>
</div>
</div>
</div>`
})
new Vue({ el: '#app'});
html,body {
height: 100% !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<maincomponent></maincomponent>
</div>
我究竟做错了什么?我怎样才能达到预期的效果?
解决方案
也将 100% 高度添加到 id app 元素
html,
body,
#app {
height: 100% !important;
}
Vue.component('listcontent', {
template: '<div class="w-100 h-75 bg-info">ds</div>'
})
Vue.component('datashared', {
template: ' <div class="w-100 h-25 bg-primary">dsadsa</div>'
})
Vue.component('maincomponent', {
template: `<div class="container h-100" >
<div class="row h-100">
<div class="col-md-5 h-100 border">
<listcontent></listcontent>
<datashared/></datashared>
</div>
</div>
</div>`
})
new Vue({
el: '#app'
});
html,
body,
#app {
height: 100% !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<maincomponent></maincomponent>
</div>
推荐阅读
- appium - 在 iOS 真机上运行 RobotFramework Appium 很慢
- javascript - 错误:ORA-01036:非法变量名称/编号 - NodeJS
- css - 如何按名称选择所有插槽?
- java - BufferedInputStream的使用
- python - 如何将模型限制为每月一条记录(Django)?
- django - Tabulator ajaxURL 添加一个问号结束
- javascript - 函数在反应中被多次调用
- javascript - 为什么每次激活时这个 jQuery 动画都会变长?
- c - C 计数器程序总是显示为零
- bash - Bash/WSL - 如何以 root 身份运行命令?