Html 间距/CSS问题?-MichaelHartl的RubyonRails教程
我在本教程中遇到的问题是,我的注册表单似乎显示在一行中。(查看表单行和底部的调试框)。字体样式与我的网站不同。(原件上的粗体文本与我的相比。) 感谢您的帮助。谢谢大家! 它应该是这样的: 但我有一个: 以下是我的CSS代码:Html 间距/CSS问题?-MichaelHartl的RubyonRails教程,html,css,ruby-on-rails,ruby,Html,Css,Ruby On Rails,Ruby,我在本教程中遇到的问题是,我的注册表单似乎显示在一行中。(查看表单行和底部的调试框)。字体样式与我的网站不同。(原件上的粗体文本与我的相比。) 感谢您的帮助。谢谢大家! 它应该是这样的: 但我有一个: 以下是我的CSS代码: @import "bootstrap-sprockets"; @import "bootstrap"; /* mixins, variables, etc. */ $gray-medium-light: #eaeaea; @mixin box_sizing
@import "bootstrap-sprockets";
@import "bootstrap";
/* mixins, variables, etc. */
$gray-medium-light: #eaeaea;
@mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
h1 {
margin-bottom: 10px;
}
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: $gray-light;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: white;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
&:hover {
color: white;
text-decoration: none;
}
}
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid $gray-medium-light;
color: $gray-light;
a {
color: $gray;
&:hover {
color: $gray-darker;
}
}
small {
float: left;
}
ul {
float: right;
list-style: none;
li {
float: left;
margin-left: 15px;
}
}
/* miscellaneous */
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
@include box_sizing;
}
/* sidebar */
aside {
section.user_info {
margin-top: 20px;
}
section {
padding: 10px 0;
margin-top: 20px;
&:first-child {
border: 0;
padding-top: 0;
}
span {
display: block;
margin-bottom: 3px;
line-height: 1;
}
h1 {
font-size: 1.4em;
text-align: left;
letter-spacing: -1px;
margin-bottom: 3px;
margin-top: 0px;
}
}
}
.gravatar {
float: left;
margin-right: 10px;
}
.gravatar_edit {
margin-top: 15px;
}
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
@include box_sizing;
}
input {
height: auto !important;
}
/*END*/
}
注册的查看代码:
<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<%= form_for(@user) do |f| %>
<%= f.label :name %>
<%= f.text_field :name %>
<%= f.label :email %>
<%= f.email_field :email %>
<%= f.label :password %>
<%= f.password_field :password %>
<%= f.label :password_confirmation, "Confirmation" %>
<%= f.password_field :password_confirmation %>
<%= f.submit "Create my account", class: "btn btn-primary" %>
<% end %>
</div>
</div>
注册
如果您需要在此处查看更多文件,请访问Github:
资料来源:
我的页脚CSS未正确关闭 谢谢大家 资料来源:
第一个问题:您的浏览器控制台中是否显示任何CSS错误?第二个问题:您确定要以与原始示例相同的DOM结构发射元素吗?你能检查一下原件,看看有什么规则适用于这些元素吗?使用这个网站。我验证了我的CSS自定义,没有问题。不知道如何检查您所说的DOM结构,但当我使用chrome inspector时,我看到主容器捕获了这个div。也许这就是您的意思。。。我试图一个接一个地禁用chrome inspector中的样式/元素,看看是否有效果或不寻常的东西,但它似乎也没有改变我的结果。如果样式不同,通常是应用了不同的规则,所以你必须找出原因。