Question

我正在登录页面，无法使用css设置vue模板的样式。

我不知道它是否起作用，这是我的代码：

HTML

<body class="text-center">
    <form class="form-signin">
        <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
        <div class="checkbox mb-3">
            <label>
                <input type="checkbox" value="remember-me"> Remember me
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
        <p class="mt-5 mb-3 text-muted">&copy; 2017-2018</p>
    </form>
</body>

CSS

html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

当我在Vue模板中做同样的事情时，它不起作用，因为我在CSS中使用了html和body标签。如何在不使用html和body标签的情况下在vue模板中实现相同的结果（明智的样式）。

使用建议的内容：

with vue

without vue

它的工作原理比以前更好，但它仍然无法100％工作，我之前曾经尝试过，而且这种情况也发生了，关于如何解决的任何想法？

Answer 1

请仔细阅读有关vue工作原理的文档。通常，vue连接到div#app并一直在那儿进行，因此在内部内编写样式的组件您无法使用body和html标签。如果您确实需要这些标记具有这些样式，则可以使用外部CSS文件并将其连接到HTML。但是，请避免在直接index.html中做一些CSS，因为稍后您可能会忘记这样做的位置，因此您将花费很多的时间来寻找它。

我看不出有任何理由想要您这样做。无需触摸html和body即可轻松实现。

使用CSS样式化vue模板的问题

1 个答案: