我正在使用 Bootstrap 构建一个站点。在一个特殊页面上，我遇到了一个奇怪的问题:
在大屏幕上打开页面时，一切似乎都是正确的。但是如果你用一个小显示器打开它，文本就会从容器中流出。按钮(链接按钮)也有同样的问题。
HTML代码是:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Die 3 Meta-Tags oben *müssen* zuerst im head stehen; jeglicher sonstiger head-Inhalt muss *nach* diesen Tags kommen -->
<title>ÖsterWeb</title>
<!-- Ubuntu Font aus der Google Fonts API -->
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<!-- Bootstrap -->
<link href="css/bootstrap_mainindex.css" rel="stylesheet">
<!-- Unterstützung für Media Queries und HTML5-Elemente in IE8 über HTML5 shim und Respond.js -->
<!-- ACHTUNG: Respond.js funktioniert nicht, wenn du die Seite über file:// aufrufst -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container hvcenter">
<!-- Container -->
<div class="row">
<!-- Bootstrap Row -->
<div class="col-lg-5">
<img src="img/Logo.png" alt="Logo" class="img-responsive">
</div>
<div class="col-lg-7">
<h1>Welcome</h1>
<p>To show you the best content for you, please chose one of the following buttons.</p>
<a href="neu/index.html" class="btn btn-block btn-info btn-lg">Are you looking for a new car?<br>Here you will find it.</a>
<a href="modern/index.html" class="btn btn-warning btn-block btn-lg">You are searching for a used vehicle<br>We can show you offers</a>
<a href="reseller/index.html" class="btn btn-block btn-success btn-lg">Your car needs a repair service?<br>Take a look!</a>
</div>
</div>
</div>
<!-- jQuery (wird für Bootstrap JavaScript-Plugins benötigt) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Binde alle kompilierten Plugins zusammen ein (wie hier unten) oder such dir einzelne Dateien nach Bedarf aus -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>bootstrap 生成的 CSS 代码:
html, body {
height: 100%;
position: relative;
}
.container {
max-width: 85%;
border-radius: 36;
padding: 3em;
background-color: silver;
}
.hvcenter {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1 {
font-size: @font-size-h1*2.5;
margin-top: -0.2em;
}
p {
font-size: @font-size-base*2;
}
img {
alignment-adjust: central;
vertical-align: middle;
text-align: center;
}你知道这个问题的解决方案吗？ 感谢每条评论。
最佳答案
按钮上的文字没有换行。换句话说，所有文本都将出现在同一行，除非您添加换行符(正如您所做的那样)而不是在文本容器已满后转到下一行。
为了解决这个问题，您需要将 CSS 属性 white-space:normal 添加到您的按钮。这是没有修复的代码:jsfiddle
这是您的修复代码:jsfiddle
关于html - Bootstrap - 文本流出容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32855916/