Javascript “如何加载”；child.vue“；进入适当的“范围”；parent.vue“；位置

我正在用vue编写一个单页web应用程序。它有4个“page.vue”，其中任何一个都有一个左右的child.vue组件

例如，Page1.vue看起来像这样（我留下了样式和脚本以保持简短）

Page1Links和Page1Rechts是我尝试加载到主要部分的子Vue

（使用了两个独立的组件，因为其中一个组件需要很快更改为更复杂的组件，并且已编写，以便另一个组件可以保持原样）

Mauderer集装箱修理工

我想看到的是一个横跨整个页面宽度的页眉组件

下面是两个子组件，它们彼此相邻，横跨整个宽度 （70%左补偿30%右补偿）

（包装在一些漂亮的设计中，以明确它们属于一起，例如，我在页面主内容类周围尝试了一个方框阴影，但它没有显示另一个指示器，表明我如何尝试它将不起作用，或者更确切地说，主div只是空的）

下面是页脚的全宽

我得到的是页面顶部彼此下方的所有div： 1.标题div 2.主div（显示为空） 3.页脚分区

下面是两个child.vue，它们紧挨在一起，但这只是因为我把它们也压在里面了

编辑： 好的，感谢flex you two提供的信息，这对从子组件中拉出布局很有帮助。 澄清： 我的问题是，我的子组件没有在其标记所在的主div内呈现。 该div class=“page main content”为空，页面链接和页面链接呈现在页脚下方。 根据我的小vue体验，我认为一个.vue组件会被渲染到您放置它的标记的位置，但这在这里不起作用，我不知道为什么

在这张图片中，您可以看到问题： 页面父vue及其所有div都在顶部呈现（第二个灰色条是页脚），尽管我希望我的方法能够将子对象呈现到主部分，但它们实际上是在第1页之后呈现的，因此基本上在第1页下方

---

我已经包括bootstrapvue了，我只是觉得这样会更简单，如果我错了，请告诉我，但是你的css代码在哪里

我不知道我是否理解正确，但是如果你想把链接和记录放在一起，你可以通过flex来实现

.page-main-content{display: flex;}
#links{flex: 0 0 70%;}
#rechts{flex: 0 0 30%;}

---

我试了好几次才奏效，但它确实解决了问题，我真的不明白为什么？flex现在将page1中的子项推送到页面主内容中

我知道这比我做的（将组件的大小编码到自身中）要方便得多，但之前组件都在每个ohter旁边，所以flex所做的是强制子级在父级内部渲染，而不是在父级的下面/后面

谢谢，问题解决了

---

如果是sbd。我知道一个简短的答案，但我仍然对为什么会这样感兴趣。

哥们，我从这个问题中了解到的是，你想要一个div在上面有全宽，在下面有两个comp（一个70宽，另一个30宽）。如果你想，你可以使用flex来实现它，或者使用bootstrap，你可以更精确地得到一个正确的答案

.page-main-content{display: flex;}
#links{flex: 0 0 70%;}
#rechts{flex: 0 0 30%;}