小屏幕上的 Bootstrap jumbotron 宽度问题答案

【问题标题】：Bootstrap jumbotron width issue on small screen小屏幕上的 Bootstrap jumbotron 宽度问题
【发布时间】：2017-07-23 03:36:26
【问题描述】：

我的 jumbotron 出现问题，其中包含一些文本和一个按钮。基本上在一个小屏幕（320）上，其中包含的文本不再居中显示，右侧出现一个白色侧边栏，我不知道它来自哪里。您可以在此处的 240 和 320 屏幕中看到它：http://mattkersley.com/responsive/ 该网站是http://test.assatena.it/

html

<div class="jumbotron vertical-center container-fluid center-block">
    <div class="container center-block">
        <h1 class="center-block">Associazione Culturale e Musicale Atena</h1>
        <div class="text-center center-block"><a data-toggle="modal" href="#modal-iscrizione" class="page-scroll btn btn-success btn-xl">iscriviti qui!</a></div>
    </div>
</div>

css

.jumbotron{
  position: relative;
  background-image: url(http://www.assatena.it/wp-content/uploads/2014/06/sfondo1.png);
  background-size: cover;
  height: 100%;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  overflow: hidden;
}

谢谢

【问题讨论】：

你能提供一个小提琴或sn-p吗？
您获得的额外空间不是因为您的 Jumbotron，而是因为没有“max-width:100%”的 img 元素。谈论您的“新闻”部分。还要降低小屏幕的字体大小。这将解决您关于居中文本的问题。
尝试使用媒体查询更改该屏幕宽度的字体大小。

标签： html css twitter-bootstrap width responsive

【解决方案1】：

img{max-width:100%;}
.jumbotron h1 {word-wrap: break-word;}

【讨论】：

只需添加这个 css 然后在你看不到小于 320px 的滚动之后