Question

我已经开始使用bootstrap开发一个网站，它反应灵敏，但只是在某种程度上。

如果我最小化浏览器，内容会自动排列，但随着我在某些时候继续最小化h1＆amp; p内容停止响应。

<html lang="en">

<head>

    <title>NiKuLsAn DeSiGn</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        body {
            background-color: black;
            }
        .imageAndText {position: relative;} 
        .imageAndText .col {position: absolute; z-index: 1; top: 50px; right: 70px;}
        .imageAndText .col2 {position: absolute; z-index: 1; top: 200px; left: 150px;}
        .imageAndText .col3 {position: absolute; z-index: 1; top: 50px; left: 150px;}

        p{
        font-size: 20px;
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="imageAndText">
                <img src="banner1.jpg" class="img-responsive" style="width:100%; height:auto;">
                <div class="col">
                    <ul class="nav navbar-nav">
                        <li><a href="#" style="font-size:20px;">About</a></li>
                        <li><a href="#" style="font-size:20px;">Services</a></li>
                        <li><a href="#" style="font-size:20px;">Contact</a></li>
                    </ul>
            </div>
            <div class="col3">
                <img src="logo.jpg" alt="logo" />
            </div>
            <div class="col2">
                <h1>Amazing Dude.</h1>
                <h1>Amazing Life.</h1>
                <p>Welcome to the personal site of <b>John Doe</b><br>A professional skier and a musician.</p>
            </div>
                </div>
        </div>
    </div>
</body>

请帮忙，因为我无法理解出了什么问题。

Answer 1

我已经创建了一个示例，其中我使用了最小的自定义CSS，其他所有内容都是使用bootstrap框架进行查询。查看并询问您的查询。

＆＃13;

body {
  background: url('http://placehold.it/1920x400') no-repeat center center;
  background-size: cover;
  /* Workaround for some mobile browsers */
  min-height: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #000;
}
.featurette-divider {
  margin: 20px 0;
  border: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar-wrapper CustomNavbar">

  <div class="container">

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Logo Goes here</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a>
            </li>
            <li><a href="#about">About</a>
            </li>
            <li><a href="#contact">Contact</a>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Something else here</a>
                </li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a>
                </li>
                <li><a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>

  </div>
</div>
<hr class="featurette-divider">

<div class="container ">
  <div class="col-sm-12">
    <h1>Amazing Dude.</h1>
    <h1>Amazing Life.</h1>
    <p>Welcome to the personal site of <b>John Doe</b>
      <br>A professional skier and a musician.</p>
  </div>
</div>

＆＃13;

使用Bootstrap＆amp; amp;开发了一个网站。它在某些时候是敏感的

1 个答案: