基础网格系统不生效

Posted 2023-02-22

【中文标题】基础网格系统不生效

【英文标题】：The foundation grid system does not take effect

【发布时间】：2017-12-27 08:20:01

【问题描述】：

为什么基础网格系统不会影响我的 div：

  render: function()
    var todos,showCompleted,searchText = this.state;
    var filteredTodos = TodoAPI.filterTodos(todos,showCompleted,searchText);
    return (
      <div>
        <h1 className="page-title">Todo App</h1>

        <div className="row">
          <div className="column small-centered small-5 medium-6 large-5">
            <div className="container">
              <TodoSearch onSearch = this.handleSearch />
              <TodoList todos =filteredTodos onToggle =this.handleToggle/>
              <AddTodo onAddTodo =this.handleAddTodo/>
            </div>
         </div>
       </div>
      </div>
    );
  

---

我使用 firebug 来调试样式： 并且找不到：

.large-5 
    width: 33.3333%;

---

该项目的回购是here

【问题讨论】：

@Solo 问题是我没有看到应用于我的 div 的网格样式

【参考方案1】：

您应该将基础导入为

@import '~foundation-sites/scss/foundation';

因为你的 webpack.config 中已经包含了路径

调试了一会，发现问题是foundation-everything mixin默认包含了另外一种网格样式

@mixin foundation-everything(
  $flex: true, //You can test this by modifying it directly in your node_modules, set it to false
  $prototype: false
) 
  @if $flex 
    $global-flexbox: true !global;
  

  @include foundation-global-styles;
  @if not $flex 
    @include foundation-grid;
  
  @else 
    @if $xy-grid 
      @include foundation-xy-grid-classes;
    
    @else 
      @include foundation-flex-grid;
    
  
  //more scss here
)

这就是为什么您的类不应用预期样式的原因，因为根据 foundation-everything 混合生成不同的类（特别是生成 XY 网格而不是foundation-grid）。

根据您的应用，您可以采用不同的方式来解决此问题。

1) 您可以在项目中包含您需要的确切基础样式集。 （我的建议）

2) 以某种方式改变 mixin（我不认为动态导入是一件事吗？(https://github.com/sass/sass/issues/279)

可能还有其他选项，例如：生成一次 css 并将其直接包含在您的应用中或使用 react-foundation package。同样，这取决于您的需要。

【参考方案2】：

正在使用React + Foundation 吗？

我不认为你是这样使用网格系统的。

你的情况可能是这样的：

<div className="grid-basics-example">
  <Row className="display">
    <Column small=5 medium=6 large=5>
       <TodoSearch onSearch = this.handleSearch />
       <TodoList todos =filteredTodos onToggle =this.handleToggle/>
       <AddTodo onAddTodo =this.handleAddTodo/>
    </Column>
  </Row>
</div>

参考：https://react.foundation/

【讨论】：

谢谢，我没有用这个库，我直接在react中使用foundation，不知道为什么在这个例子中不起作用