Laravel 5 分页 CSS 分页

Question

我正在使用 Laravel 5 和 Bootstrap 3.3.4

所以我的控制器中有以下代码：

$articles = Newsarticles::paginate(10);
return view ('news',compact('articles');

那么在我看来我有：

@foreach($articles as $article)

<article>
    <h2>
        <a href="{!! action('DynamicPages@show', [$article->slug]) !!}">{!! $article->headline !!}</a>
    </h2>
    <div class="body">
        {!! substr($article->article,0,500) !!}
    </div>
</article>

@endforeach

{!! $articles->render() !!}

当我运行这样做时，页面底部的分页链接显示得很好，看起来就像它们应该做的那样。但是，如果我将控制器更改为：

$articles = Newsarticles::orderBy('artdate','DESC')->paginate(10);

我的分页链接是这样出来的：

«
1
2
3
4
5
6
»

代码中的一个小调整如何打破 css？

Answer 1

使用 substr($article->article,0,500) 你可能会破坏 html 代码。

您还可以拥有不同数量的活字符

p>hello</p>

12 个字符

<stong>hello</strong>

21 个字符。

并注意这个：

echo substring('<p>hello</p>', 5);

写道：“

他”。打破 html 结果。

试试

substr(strip_tags($article->article,0,500))

在剪切字符串之前去除所有 html 制表符。这不会破坏您当前的 html，并且您将获得正确的字符长度。

Answer 2

没有足够的信息来回答 -- 但三大可能性是

不知何故你在每个例子中呈现不同的HTML
页面上的其他 CSS 不是 bullet-proof，而是根据标题和内容长度创建不同的容器包装
$article->article、$article->slug 或 $article->headline 中的 HTML 内容带有未闭合的标签，破坏了布局（或意外的 tags/styles/classes 干扰页面 CSS)

为不同的请求复制页面的原始页面源代码（查看 -> 开发人员 -> 在 Chrome 中查看源代码），然后运行通过 diff 程序（CLI） diff、WinMerge、opendiff 等）以发现任何渲染差异。

假设有 none，调查每个内容区域是否有损坏的标签，然后开始使用不同长度的标题和文本 body 区域填充布局，直到触发问题，然后修复你的 CSS 从那里。

祝你好运！

Answer 3

没有转义标签，一个开放的 HTML 标签正在杀死 css。感谢@mininoz 指出

Answer 4

来自我上面的评论。

问题是损坏的 html 标签。这是因为在这一行使用了substr()。

{!! substr($article->article,0,500) !!}

该函数将删除部分 $article->article 并保留一些标签。

要解决问题，您需要在执行 substr() 之前删除标签

{!! substr(strip_tags($article->article),0,500) !!}

Laravel 5 分页 CSS 分页

Laravel 5 Pagination CSS Breaking

css

php

laravel

twitter-bootstrap-3

laravel-5