Question

这是我第二次在项目中使用Bootstrap。我不确定是什么原因导致我的网页无法正常响应。调整视图端口大小时，内容会从容器中移出。我相信它是由Bootstrap col- *和行类的不当使用引起的。下面是HTML和CSS代码。

编辑：我最近走了一段并重构了一些代码，发现我没有正确地将行放在列中。

＆＃13;

.wrapper {
    position: relative;
    padding: 0 15px;
}

.responsive-image {
    width: 100%;
    height: auto;
}

#statement {
    position: absolute;
    text-align: center;
    top: 280px;
    left: 300px;
    font-size: 50px;
    font-weight: bold;
    color: #ffffff;
}

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    top: -215px;
    position: relative;
    max-width: 96.7vw;
    height: 200px;
    left: 30px;
    top: -340px;
    padding-bottom: 50px;
}

a {
    color: #ffffff;
}

.search-text {
    padding-left: 10px;
    float: right;
}

.glyphicon-search {
    padding-top: 10px;
    padding-left: 30px;
    color: black;
}

.search-bar-container {
    padding-top: 10px;
    background-color: red;
    top: -390px;
    max-width: 96.7vw;
    height: 70px;
    left: 31px;
}

.row-eq-height>[class*='col-'] {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-top: 50px;
    font-size: 25px;
    font-style: italic;
    font-weight: bold;
}

.translucent>div {
    background-color: rgba(0, 0, 0, 0.5);
    border: solid 1px #ffffff;
}

.nav-item>a {
    color: #000000;
    font-weight: bold;
}

.nav-wrapper {
    position: absolute;
    right: 0;
    left: 0;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mock Up</title>
     <!-- Bootstrap Link -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Custom CSS -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
   
</head>

<body>
    <div class="nav-wrapper">
        <nav class="navbar navbar-static-top">
            <!--Navbar-->
            <div class="row">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
                        <!-- Collapsing Hamburger Buttons for mobile -->
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <!--Menu Items-->
                <div class="collapse navbar-collapse navbar-right" id="mainNavBar">
                    <ul class="nav navbar-nav">
                        <li class="nav-item">
                            <a href="#home">HOME</a>
                        </li>
                        <li class="nav-item">
                            <a href="#showroom">SHOWROOM</a>
                        </li>
                        <li class="nav-item">
                            <a href="#services">SERVICES</a>
                        </li>
                        <li  class="nav-item">
                        	<a href="#info">INFO</a>
                        </li>
                        <li class="nav-item">
                        	<a href="#photos">PHOTO GALLERY</a>
                        </li>
                        <li class="nav-item">
                        	<a href="#contact">CONTACT</a>
                        </li>
                    </ul>
                </div>
            </div>
         </div>
     </nav>
 </div>

    <div class="wrapper">

        <img class="responsive-image" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2YmRfVmlUaDdZU1E=w1366-h653-iv1" alt="road in the sunset banner">
    </div>
   
<div class="row row-eq-height translucent">
  <div class="col-lg-3 col-xs-12 box-color"><a href="#">NEW <br>INVENTORY</a></div>
  <div class="col-lg-3 col-xs-12 box-color"><a href="#">PRE OWNED <br>INVENTORY</a></div>
  <div class="col-lg-3 col-xs-12 box-color"><a href="#">CUSTOMER <br>FABRICATION</a></div>
  <div class="col-lg-3 col-xs-12 box-color"><a href="#">SERVICE <br>DEPARTMENT</a></div>
</div>

<div class="row">
	<div class="col-xs-12 search-bar-container">
		
		<form class="form-inline">
			<div class="form-group">

				<label><span class="search-text glyphicon glyphicon-search" aria-hidden="true">QUICK SEARCH</span></label>
				<input type="text" class="form-control" id="search-manufacturers" placeholder="(All Manufacturers)">
				
			</div>
			

		</form>
		
	</div>
	
</div>



    <script src="https://use.fontawesome.com/bd8b80bd9d.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

＆＃13;

Answer 1

如果您正在寻找类似的内容，请参阅此Fiddle。在此Fiddle中，我使用一些结构和CSS更改更新了您的代码。

需要帮助调试Bootstrap响应能力。无法正确扩展内容

1 个答案: