Question

我试图在我的菜单和其他盒子之间找到一个空间。

屏幕会清晰显示;

你可以看到，菜单比右边的大框大，但是Verbanningen die ten einde lopen所在的第二个框必须“坚持”＃39;到另一个小组。所以菜单独立于第二个框。希望你们明白。

到目前为止，这是我的代码：

<div class="container">
    <div class="row">

        <div class="col-sm-3">
            <div class="panel panel-default">

                <div class="panel-heading">
                    <div class="panel-title"><strong><i class="fa fa-bars"></i> Menu</strong></div>
                </div>

                <div class="panel-body thread-row">

                    <ul class="nav nav-pills nav-stacked">
                      <li class="active"><a href="#">Home</a></li>
                      <li><a href="#">Option 1</a></li>
                      <li><a href="#">Option 2</a></li>
                      <li><a href="#">Option 3</a></li>
                      <li><a href="#">Option 4</a></li>
                      <li><a href="#">Option 5</a></li>
                    </ul>

                </div>

            </div>
        </div>

        <div class="col-sm-9">
            <div class="panel panel-default">

                <div class="panel-heading">
                    <div class="panel-title"><strong><i class="fa fa-flag"></i> Laatste reports</strong></div>
                </div>

                <div class="panel-body thread-row">
                @if(count($reports) > 0)
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Door</th>
                                <th>Type</th>
                                <th>Reden (optioneel)</th>
                                <th>Url</th>
                                <th>Bericht</th>
                                <th>Ontvangen op</th>
                                <th>Actie</th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach($reports as $report)
                            <tr>
                                <td><a href="{{ Config::get('app.url') }}/User-{{ $report->reported_by }}">{{ $report->reported_by }}</a></td>
                                <td>{{ $report->type }}</td>
                                <td>{{ ($report->reason != '') ? $report->reason : '/' }}</td>
                                <td><a href="{{ $report->url }}">{{ strstr($report->url, 'Thread-') }}</a></td>
                                <td>{{ $report->content }}</td>
                                <td>{{ \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $report->reported_at)->format('d-m-y \o\m H:i') }}</td>
                                <td><span class="label label-primary"><i class="fa fa-trash-o"></i> Verwijder</span></td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                @else
                <div class="alert alert-info" role="alert"><i class="fa fa-check"></i> Er zijn momenteel geen gerapporteerde berichten!</div>
                @endif
                </div>

            </div>
        </div>

        <div class="col-sm-offset-3 col-sm-9">

            <div class="panel panel-default">

                <div class="panel-heading">
                    <div class="panel-title"><strong><i class="fa fa-ban"></i> Verbanningen die ten einde lopen</strong></div>
                </div>

                <div class="panel-body thread-row">

                    <table class="table">
                        <thead>
                            <tr>
                                <th>Gebruikersnaam</th>
                                <th>Reden</th>
                                <th>Duur</th>
                                <th>Verbannen door</th>
                                <th>Actie</th>
                                <th>Actie</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Test-user</td>
                                <td>Het meerdermalen beledigen van een teamlid.</td>
                                <td>1 maand<br><small>(tot 6-11-2015)</small></td>
                                <td>Robin</td>
                                <td><span class="label label-danger"><i class="fa fa-edit"></i> bewerken</span></td>
                                <td><span class="label label-success"><i class="fa fa-trash"></i> opheven</span></td>
                            </tr>
                        </tbody>
                    </table>

                </div>

            </div>

        </div>

    </div>
</div>

我没有修改bootstrap文件中的任何内容，但是没有对网格进行修改。

希望有人可以帮助我！

Answer 1

我认为这里的问题是你基本上有两行。如果您希望两个宽组件直接位于彼此之下，则第二个@applied = AppliedVacancies.where(employee_id: current_employee) @appliedvacancies_id = [] @applied.each do |appliedvacancy| @appliedvacancies_id << appliedvacancy.id end @notyetappliedvacancies = Vacancy.where("id != ?", @appliedvacancy_id)内容需要位于第一个内部。

基本上你希望两个col-sm-9元素是兄弟姐妹。

如下所示：

panel

Answer 2

第二个col -..- 9不是必需的，因为你已经有一个正确的列，你可以放置许多面板。

I solve this on

<div class="container">
    <div class="row">

        <div class="col-sm-3">
            <div class="panel panel-default">

                <div class="panel-heading">
                    <div class="panel-title"><strong><i class="fa fa-bars"></i> Menu</strong></div>
                </div>

                <div class="panel-body thread-row">

                    <ul class="nav nav-pills nav-stacked">
                      <li class="active"><a href="#">Home</a></li>
                      <li><a href="#">Option 1</a></li>
                      <li><a href="#">Option 2</a></li>
                      <li><a href="#">Option 3</a></li>
                      <li><a href="#">Option 4</a></li>
                      <li><a href="#">Option 5</a></li>
                    </ul>

                </div>

            </div>
        </div>

        <div class="col-sm-9">
            <div class="panel panel-default">

                <div class="panel-heading">
                    <div class="panel-title"><strong><i class="fa fa-flag"></i> Laatste reports</strong></div>
                </div>

                <div class="panel-body thread-row">
                @if(count($reports) > 0)
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Door</th>
                                <th>Type</th>
                                <th>Reden (optioneel)</th>
                                <th>Url</th>
                                <th>Bericht</th>
                                <th>Ontvangen op</th>
                                <th>Actie</th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach($reports as $report)
                            <tr>
                                <td><a href="{{ Config::get('app.url') }}/User-{{ $report->reported_by }}">{{ $report->reported_by }}</a></td>
                                <td>{{ $report->type }}</td>
                                <td>{{ ($report->reason != '') ? $report->reason : '/' }}</td>
                                <td><a href="{{ $report->url }}">{{ strstr($report->url, 'Thread-') }}</a></td>
                                <td>{{ $report->content }}</td>
                                <td>{{ \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $report->reported_at)->format('d-m-y \o\m H:i') }}</td>
                                <td><span class="label label-primary"><i class="fa fa-trash-o"></i> Verwijder</span></td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                @else
                <div class="alert alert-info" role="alert"><i class="fa fa-check"></i> Er zijn momenteel geen gerapporteerde berichten!</div>
                @endif
                </div>

            </div>


            <div class="panel panel-default">

                <div class="panel-heading">
                    <div class="panel-title"><strong><i class="fa fa-ban"></i> Verbanningen die ten einde lopen</strong></div>
                </div>

                <div class="panel-body thread-row">

                    <table class="table">
                        <thead>
                            <tr>
                                <th>Gebruikersnaam</th>
                                <th>Reden</th>
                                <th>Duur</th>
                                <th>Verbannen door</th>
                                <th>Actie</th>
                                <th>Actie</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Test-user</td>
                                <td>Het meerdermalen beledigen van een teamlid.</td>
                                <td>1 maand<br><small>(tot 6-11-2015)</small></td>
                                <td>Robin</td>
                                <td><span class="label label-danger"><i class="fa fa-edit"></i> bewerken</span></td>
                                <td><span class="label label-success"><i class="fa fa-trash"></i> opheven</span></td>
                            </tr>
                        </tbody>
                    </table>

                </div>

            </div>

        </div>

    </div>
</div>

Bootstrap让面板彼此相邻

2 个答案: