我已经让我的横幅/标题响应，我会把这些下拉按钮放在一个盒子里(我希望它没问题？)。我也是 Bootstrap 的新手(更像是新手)，只是从演示中复制了代码。我只需要让这个特定的盒子和里面的其他盒子一起响应。如果盒子不是正确的东西，虽然它有点不错，但请提出任何建议。谢谢。
这是我的全部:
img.img-responsive {
margin: auto;
}
.masthead {
height: 1000px;
align: center;
background-image: url("../img/lEy8hs2.jpg]");
background-attachment: fixed;
background-repeat: no-repeat;
}
body {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
background-image: url(../img/lEy8hs2.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
.box {
font-weight: 700;
box-shadow: inset 2px 2px 10px 10px #FC2B48;
border-radius: 100px;
background-color: #7D00C1;
padding: 50px 100px 50px;
margin: 50px;
margin-left: 200px;
width: 950px;
height: 1800px;
color: ##FFE900;
font-weight: 900;
}
/******************************************************
ROUNDED BUTTONS
******************************************************/
.btn-primary {
background-color: #BC1A45;
color: #FFFD7C;
}
.btn-lg.round {
border-radius: 32px;
}
/******************************************************
RAISED BUTTONS
******************************************************/
.btn-primary.raised {
box-shadow: 0 3px 0 0 #51096D;
}
.btn-primary.raised:active,
.btn-primary.raised.active {
background: #D31B4C;
box-shadow: none;
margin-bottom: -3px;
margin-top: 3px;
}
.box2 {
margin: 100px;
margin-left: 300px;
width: 300px;
height: 100px;
color: #F2F918;
}<!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">
<title>Tekkenetic!</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="shortcut icon" href="img/favicon.ico" />
</head>
<body>
<!-- HEADER -->
<div class "img">
<div class="masthead">
<p>
<img src="img/51e5b810a79ab.png" alt="image" class="img-responsive" />
</p>
<div class="box">
<!-- 1st button -->
<div class="btn-group">
<button type="button" class="btn btn-primary btn-lg raised round"><span class="glyphicon glyphicon-home"></span> HOMEPAGE</button>
</div>
<!-- 2ND BUTTON -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle btn-lg raised round" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-picture"></span> GALLERY <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Game Screenshots</a>
</li>
<li><a href="#">Cool Fanarts</a>
</li>
</ul>
</div>
<!-- 3RD BUTTON -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle btn-lg raised round" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class=" glyphicon glyphicon-sunglasses"></span> CHARACTERS <span class="caret"></span>
</button>
<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>
</ul>
</div>
<!-- 4TH BUTTON -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle btn-lg raised round" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-plus"></span> EXTRAS <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Another action</a>
</li>
</ul>
</div>
<!-- 5TH BUTTON -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle btn-lg raised round" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class=" glyphicon glyphicon-info-sign"></span> ABOUT <span class="caret"></span>
</button>
<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>
</ul>
</div </div>
</div>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>最佳答案
您正在使用 Bootstrap 为什么不利用 Bootstrap 容器和网格系统 http://getbootstrap.com/css/#grid
<div class="container">
<div class="box col-xs-12 col-md-8"> <!-- just dont give width to .box class in css-->
...
</div>
</div>
关于javascript - 如何使 '.box' 响应以及其中的元素，如下拉按钮、文本等？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32623123/