网格不会改变 div 位置

Question

所以在过去的 30 分钟里，我一直在尝试制作一个网格，但我似乎无法让它工作。我已经在沙盒上尝试了这段代码并且它在那里工作。我不明白为什么它在我的页面上不起作用。发生的是所有 div 都放在彼此下面，我希望它们彼此相邻。

会发生什么：

分区1

分区2

分区3

我想要发生的事情：

分区 1 分区 2 分区 3

<div class="jar-lists-wrapper slide-in">

        @foreach($folders as $folder)

        <div class="jar-lists hidden" data-name="{{$folder}}">

            <div class="jar-list box" data-name="{{$folder}}">

                <div class="box-header with-border">

                    <h1 class="box-title">{{$folder}}</h1>

                </div>

                <div class="box-body">

                    <div class="jar-children">

                        @foreach($jars as $jar)

                        @if(strpos($jar, strtolower($folder)) !== false)

                        <div>

                            <h3 class="jar-title">Version:

                                {{str_replace(array(strtolower($folder) . '-', '.jar'), '', $jar)}}

                            </h3>

                            <form action="{{ route('server.settings.jar.switch', $server->uuidShort) }}" method="POST">

                                @if(str_replace('.jar', '', $jar) == $currentJar)

                                <br><button class="btn btn-success" type="submit">Installed</button>

                                @else

                                <br><button class="btn btn-primary" type="submit">Install</button>

                                @endif

                            </form>

                            <br>

                        </div>

                        @endif

                        @endforeach

                    </div>

                </div>

                <div class="box-footer">

                    <a href="#" class="jars-more">View More<i class="fa fa-caret-down"></i></a>

                </div>

            </div>

        </div>

        @endforeach

    </div>

Answer 1

div 是块级元素，因此它们水平显示。所以使用display:inline-block和width.child {&nbsp; display: inline-block;&nbsp; width: 100px;&nbsp; height: 100px;&nbsp; border: 1px solid red;}<div class='parent'>&nbsp; <div class='child'>1</div>&nbsp; <div class='child'>1</div>&nbsp; <div class='child'>1</div></div>您也可以使用flex.parent {&nbsp; display: flex;&nbsp; flex-direction: row;}.child {&nbsp; border: 2px solid green;&nbsp; width: 150px;}<div class='parent'>&nbsp; <div class='child'>1</div>&nbsp; <div class='child'>1</div>&nbsp; <div class='child'>1</div></div>您还可以使用网格.parent {&nbsp; display: grid;&nbsp; grid-template-columns: repeat(3, 1fr)}.child {&nbsp; border: 1px solid red;}<div class='parent'>&nbsp; <div class='child'>1</div>&nbsp; <div class='child'>1</div>&nbsp; <div class='child'>1</div>&nbsp; </div

Answer 2

尝试gird-template-spacing将 32.5% 指定为 1fr。