如何将包含文本和图像的分割元素彼此对齐?
这是代码:
这个分区元素包含了paragaph元素和image元素,但是分区元素之间的margin太多了。
<template lang = "html">
<div class = "">
<h1>{{ Help }}</h1>
<div class = "container">
<div class = "row">
<form>
<input type="text" name="search" placeholder = "Search : Tutorial, FAQS, Contacts "class = " form-control input-lg" height = "">
</form>
</div>
</div>
<div class = "container">
<div class = "row">
<h2>levi basics</h2>
<h3>What is levi?</h3>
<p class = "" id = "Headline"> levi is data curation software. This means that from <b>collection</b> to <b>sharing</b> to <b>analyzing</b> of data, levi refines each step in that process to provide wellbeing for institutions.</p>
<h3>How does levi function?</h3>
<div class = "col-sm-4">
<p class = "lead">levi receives data.</p>
</div>
<div class = "col-sm-4" id = "align">
<p class = "lead">levi will analyse data over time to show the historical behaviour of your business. </p>
<img src = "../../assets/GraphAnalysis.png" alt = "GraphAnalysis" width = "200" height = "150" class = "Img">
</div>
<div class = "col-sm-4">
<p class = "lead">levi will share data with those who need it and help businesses collaborate with each other better!</p>
<img src = "../../assets/DataShare.jpg" alt = "GraphAnalysis" width = "300" height = "150" class = "Img">
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Support',
data() {
return {
Help: 'How can levi Help?',
};
},
};
</script>
<style lang = "css" scoped >
h1 { font-size: 90px; text-align: center; font-family: Heiti SC; font-weight: bolder; line-height: 1em; margin-top: 90px; }
h2 { text-align: center; font-family: Heiti SC; font-size: 50px; }
h3 { font-family: Heiti SC; margin-top: 50px; font-size: 60px; }
input {
border: solid 1px 0;
box-shadow: none;
height: 60px;
}
input[placeholder = Search] {
font-size: 90px;
}
#Headline {
font-size: 30px;
line-height: 1.2em;
font-family: Heiti SC;
font-weight: lighter;
}
</style>
这是页面外观的 JS fiddle。
最佳答案
您需要重置初始样式以具有 margin-bottom: 0;
在 vue 组件中,将组件名称作为最高级别是很常见的 <div></div>
元素。
然后在您的 css 中您可以重置所有 p 标签;
.Support p{
margin-bottom: 0;
}
上面的代码会将在您的模板中找到的所有 p 元素作为您使用 scoped 属性的目标。如果您有覆盖组件 css 的全局样式,您可能需要添加 !important
给你的属性 margin-bottom: 0 !important;
这将使它成为比上述常规初始化样式更高优先级的样式。
关于twitter-bootstrap - 如何减少我的 vue.js 元素中的分区元素之间的边距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44876286/