ブートストラップをインストールして遊んだ後、どういうわけか、ページごとに異なるページ幅を設定しましたが、これは嫌いです。ページ幅を修正するには、.css ファイルに何かを追加する必要があると思いますが、stackoverflow と google で見つけたものはすべて、これまでのところ役に立ちませんでした。だから私はそれについてあなたの助けが必要です。ここに私のアプリがあります: http://murmuring-headland-8091.herokuapp.com/
これが私の.cssファイルです:
@import "bootstrap";
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 60px;
}
body {
background-image: url(http://i.imm.io/NOW7.png);
background-attachment:fixed;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
}
.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.7em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: #999;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: black;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 0px;
font-weight: bold;
line-height: 1;
}
#logo:hover {
color: red;
text-decoration: none;
}
.navbar-inner {
background-color: #fff; /* place your solid color here */
background-image: none;
background-repeat: no-repeat;
filter: none;
}
.navbar .nav,
.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.navbar-inner{
border-radius:50px;
background: #fff !important;
background-image: none;
background-repeat: no-repeat;
filter: none !important;
border-top:10px solid #fff !important;
border-bottom:10px solid #fff !important;
border-left:5px solid #fff !important;
border-right:5px solid #fff !important;
}
.navbar .nav > li > a{
padding:12px 15px 12px;
color:#000000 !important;
text-shadow:none !important;
border-right: 1px solid #5BB75B;
border-left:1px solid #5BB75B;
-webkit-transition:background 1s ease;
-moz-transition:background 1s ease;
-o-transition:background 1s ease;
transition:background 1s ease;
}
.navbar .nav > li > a:hover{
background:#5BB75B !important;
color:#fff !important;
-webkit-transition:background 1s ease;
-moz-transition:background 1s ease;
-o-transition:background 1s ease;
transition:background 1s ease;
}
.navbar .nav .active > a,
.navbar .nav .active > a:hover,
.navbar .nav .active > a:focus {
color: #fff;
box-shadow:none;
background: #5BB75B !important;
}
.main-width { margin: 0px auto; }
ホームページだけが他のページと異なるため、home.html.erb ファイルに問題がある可能性があります。必要に応じて、そのコードも投稿できます。