我正在开发自己的博客网站，并面临生产中有趣的前端问题。我的网站主页在我的开发环境中看起来像全宽，如here。但在生产上它看起来像this。我的css知识很差，我找不到问题所在。
这是我的主页查看代码
<div class="hero-body">
<div class="columns is-desktop">
<div class="column is-10">
<% 10.times do |x| %>
<% @articles.reverse.each do |article| %>
<div class="header-content">
<div class="">
<h1 class="title">
<%= article.title.mb_chars.upcase %>
</h1>
</div>
</div>
<div class="subheader-content">
<p>posted in on <a class="is-underlined-link"></a></p>
</div>
<div class="single-content">
<%= truncate(article.text, length: 358, escape: false) %>
<div class="">
<p><%= link_to "Devamını Oku", article_path(article), {:class => "button"} %></p>
</div>
</div>
<!-- end of post -->
<% end %>
<%end%>
</div>
</div>
这种视图布局是这样的
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<title>Yusuf Duyar - Blog</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Kişisel Blog Sayfası">
<meta name="author" content="Yusuf DUYAR">
<%= csrf_meta_tags %>
<%= stylesheet_link_tag "bulma" %>
<%= stylesheet_link_tag "style" %>
<link href="https://fonts.googleapis.com/css?family=Lato:300,700|Raleway:300,300i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<%= stylesheet_link_tag "normalize-rails" %>
<%= javascript_include_tag "application" %>
<%= javascript_include_tag "jquery/jquery.min" %>
</head>
<body>
<div class="columns">
<div class="column is-one-quarter left-panel has-text-white">
<%= render 'shared/navigation' %>
</div>
<div class="column is-three-quarters is-centered right-panel">
<%= yield %>
</div>
</div>
<% flash.each do |key, value| %>
<%= content_tag(:div, value, class: "alert alert-#{key} fade-in") %>
<% end %>
<script>
setTimeout("$('.alert').fadeOut('slow')", 5000)
</script>
<%= javascript_include_tag "fontawesome-all.min", :defer => 'defer' %>
</body>
</html>
我正在使用标准的bulma.css和我自己的css
.content {
padding-bottom: 50px;
}
.content p {
padding-bottom: 15px;
}
.footer-custom {
padding: 30px;
}
.single-content p {
padding-bottom: 15px;
}
.single-content {
padding-bottom: 50px;
}
.header-content {
padding-bottom: 5px;
}
.subheader-content {
padding-bottom: 20px;
}
.is-underlined-link{
color: grey;
text-decoration: none;
border-bottom: 3px solid $link_color;
}
//.is-underlined-link{
// color: $link_color;
//}
/* colour changes to the bulma framework */
a {
color: $link_color;
}
.tabs li.is-active a {
border-bottom-color: #ff3860;
color: #ff3860;
}
/* input select */
.input:focus, .textarea:focus, input[type]:focus {
border: 1px solid #ff3860;
outline: none !important;
}
h1.title a {
color: #E6E6E6 !important;
font-weight: 400;
}
.subtitle{
color: #c2c2c2 !important;
}
/*h1.title a:hover{*/
/*border-bottom-color : #ff3860;*/
/*text-decoration: underline;*/
/*text-decoration-color: #ff3860;*/
/*}*/
header img {
line-height:0;
margin-top:15px;
border-radius:150px;
width:150px;
height:150px;
border:4px solid #E6E6E6
}
header img:hover{
border:4px solid $link_color
}
hr{
border: 0.5px solid #7a7a7a;
}
.nav-item
{
padding: 0.2rem 0.3rem;
color: #c2c2c2 !important;
}
a.nav-item:hover{
color: white !important;
}
.left-panel{
background: #363636;
overflow-y: auto;
}
.right-panel{
overflow-y: auto;
flex-grow: 1;
}
@media (min-width: 720px){
.left-panel, .right-panel{
flex-grow: 1;
overflow-y: auto;
flex-shrink: 0;
}
.column {
height: 100%; /*allows both columns to span the full height of the browser window*/
display: flex;
flex-direction: column; /*places the left and right headers above the bottom content*/
}
}
@media screen and (max-width: 720px) {
body {
overflow-y: scroll !important;
}
}
html {
height: 100%;
}
body {
height: 100%;
overflow: hidden; /*makes the body non-scrollable (we will add scrolling to the sidebar and main content containers)*/
margin: 0px; /*removes default style*/
display: flex; /*enables flex content for its children*/
box-sizing: border-box;
}
.columns{
margin-bottom: 0 !important;
}
我的网站地址是http://yusufduyar.com/，密码在https://github.com/yusufduyar/yusufduyar-blog
我怎么解决这个问题？
不确定为什么会遇到此问题，但您可以使用css规则修复它
.columns{
width: 100%
}