Question

我正在关注有关RoR的教程，他们使用flexbox网格布局为页面添加样式。

我有一个错误，即flexbox没有像我们应该完成的那样使我的导航标签居中。

目前我在导航栏中有4个不同的标签以及标题。像这样：标题A B C D

Flexbox应将屏幕宽度的100％划分为5，以便为每个标签提供正确的间距，但它不会这样做，并且全部都停留在屏幕中间。

这就是为什么我会感激任何帮助。我做错了什么？

我将flexboxgrid.css保存在assets/stylesheets。

我的application.html.erb是：

!DOCTYPE html>
<html>
<head>
  <title>Blog</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
    <header>
        <nav class="be-red white large-padding">
            <ul class="no-list row center-xs middle-xs">
                <li class="col-md" >
                    <h1 class="no-margin" id="logo">Blog Facilito</h1>
                </li>
                <li class="col-md">
                    <%= link_to "Inicio", root_path %>
                </li>
                <li class="col-md">
                    Diseno      
                </li>
                <li class="col-md">
                    Programacion
                </li>
                <li class="col-md">
                    Tecnologia
                </li>

            </ul>
        </nav>
    </header>

    <%= yield %>

</body>
</html>

Style.css是：

*{
    margin: 0px;
}

a,a:visited{
    color: inherit !important;
    text-decoration: none;
}

#logo{
    font-size: 1.2em;
}

.no-margin{
    margin: 0px;
}

.be-red{
    background-color: rgb(200,50,50);
}

.large-padding{
    padding: 10px 7px;
}

.white{
    color: white;
}

Answer 1

Uriel使用不同版本的flex-box网格，他使用的是版本6.1.1，而您使用的是最新版本的客户。

试试这个把它放在标题之后。在application.HTML.erb。

<link rel="stylesheet" href="//cdn.jsdelivr.net/flexboxgrid/6.1.1/flexboxgrid.min.css" type="text/css" />

或从此处下载flexbox网格6.1.1：

https://github.com/kristoferjoseph/flexboxgrid

希望你能理解我糟糕的英语。

Answer 2

我不知道ruby-on-rails，它似乎添加了自己的css库，但你可以试试

.row {
  display: flex;      /* Magic begins */
}
.col-md {
  flex: 1;            /* Distribute widths equally */
  text-align: center; /* Center inner text */
}

＆＃13;

* {
  margin: 0px;
  padding: 0;
}
a, a:visited {
  color: inherit !important;
  text-decoration: none;
}
#logo {
  font-size: 1.2em;
}
.no-margin {
  margin: 0px;
}
.be-red {
  background-color: rgb(200, 50, 50);
}
.large-padding {
  padding: 10px 7px;
}
.white {
  color: white;
}
.no-list {
  list-style: none;
}
.row {
  display: flex;      /* Magic begins */
}
.col-md {
  flex: 1;            /* Distribute widths equally */
  text-align: center; /* Center inner text */
}

＆＃13;

<header>
  <nav class="be-red white large-padding">
    <ul class="no-list row center-xs middle-xs">
      <li class="col-md" >
        <h1 class="no-margin" id="logo">Blog Facilito</h1>
      </li>
      <li class="col-md">Inicio</li>
      <li class="col-md">Diseno </li>
      <li class="col-md">Programacion</li>
      <li class="col-md">Tecnologia</li>
    </ul>
  </nav>
</header>

＆＃13;

Flexboxgrid.css不会使导航标签

2 个答案: