如何使用 CSS 和 Bootstrap 扩展文本宽度答案

【问题标题】：How to expand the text-width with CSS and Bootstrap如何使用 CSS 和 Bootstrap 扩展文本宽度
【发布时间】：2020-11-25 17:42:26
【问题描述】：

我是编程新手，我正在使用 Python Flask、CSS 和 Bootstrap 作为第一个项目来设计我的博客。我在帖子部分的设计上有些挣扎。这是我能够做到的：

如您所见，文本在中心位置过多。如何将文本向右和向左扩展一点，使其看起来更具可读性？我尝试使用 Bootstrap 网格系统，但无法获得任何结果。问题还在于 Facebook 插件非常不灵活，所以无论如何我都必须使其适应文本宽度。这是我的代码-sn-p：

<article>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
        {{ post.content|safe }}
        <hr>
        <div id="fb-root"></div>
        <script async defer crossorigin="anonymous" src="https://connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v9.0" nonce="I8QQqnPj"></script>
      <div class="fb-comments" data-href="http://127.0.0.1:5000/" data-numposts="5" data-width="400"></div>
        </div>
      </div>
    </div>
</article>

非常感谢您的每一个建议。

【问题讨论】：

标签： python html css twitter-bootstrap

【解决方案1】：

您可以将列编辑为最大宽度：<div class="col-12"</div>，或者您可以将<div class="container-fluid"</div> 用于全宽容器，而不是“容器”。

【讨论】：

【解决方案2】：

好的，我找到了解决方案。其实这很容易。我只是扩大了列号：<div class="col-lg-12 col-md-10 mx-auto">。这是现在的样子：

【讨论】：