Twitter bootstrap 如何在vue.js项目中减少部门元素之间的差距？

如何使包含文本和图像的分割元素彼此更接近

代码如下：

此分割元素包含段落元素和图像元素，但分割元素之间的边距太大

<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>

{{Help}}
李维斯基础
什么是李维？
levi是一种数据管理软件。这意味着，从数据收集到共享再到数据分析，levi完善了这一过程中的每一步，为机构提供福利

李维是如何运作的？
levi接收数据

levi将分析一段时间内的数据，以显示您企业的历史行为
levi将与需要的人共享数据，并帮助企业更好地相互协作
导出默认值{
名称：“支持”，
数据（）{
返回{
帮助：“李维能帮什么忙？”，
};
},
};
h1{字体大小：90px；文本对齐：中心；字体系列：Heiti SC；字体大小：粗体；线条高度：1em；页边空白顶部：90px；}
h2{文本对齐：居中；字体系列：Heiti SC；字体大小：50px；}
h3{字体系列：Heiti SC；页边空白顶部：50px；字体大小：60px；}
输入{
边框：实心1px0；
盒影：无；
高度：60px；
}
输入[占位符=搜索]{
字体大小：90px；
}
#标题{
字体大小：30px；
线高：1.2米；
字体系列：Heiti SC；
字体重量：较轻；
}

这是关于页面外观的JS fiddle

---

您需要重置初始样式，使其具有

页边距底部：0在vue组件中，组件名称通常作为最高级别的
元素

在css中，您可以通过执行以下操作重置所有p标记：

.Support p{
    margin-bottom: 0;
}

以上内容将使用scoped属性将模板中的所有p元素作为目标。如果您有覆盖组件css的全局样式，您可能需要添加
！重要的
属性为您提供
页边距底部：0！重要的，这将使其成为比上述常规初始化样式优先级更高的样式