Question

我正在开发自己的博客网站，并面临生产中有趣的前端问题。我的网站主页在我的开发环境中看起来像全宽，例如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

我该如何解决这个问题？

Answer 1

不确定为什么会出现此问题，但您可以使用css规则修复

.columns{
  width: 100%
}

Rails视图 - 相同页面和CSS但内容大小不同

1 个答案: