Question

我正在使用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>

引导程序生成的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;
}

你知道这个问题的解决方案吗？每条评论都有THX。

Answer 1

按钮上的文字没有换行。换句话说，所有文本都将出现在同一行，除非您添加换行符（如您所做），而不是在文本容器已满后转到下一行。为了解决这个问题，您需要将CSS属性white-space:normal添加到按钮中。以下是没有修复的代码：jsfiddle

以下是修补程序的代码：jsfiddle

Answer 2

在class添加col-xs-12属性上

<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-xs-12 col-lg-5">
        <img src="img/Logo.png" alt="Logo" class="img-responsive">
      </div>
      <div class="col-xs-12 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 - 文本流出容器

2 个答案: