个人中心
gpt4 book ai didi

javascript - 如何使 '.box' 响应以及其中的元素，如下拉按钮、文本等？

转载 作者：行者123 更新时间：2023-11-28 07:11:23 25 4
gpt4 key购买 nike

我已经让我的横幅/标题响应，我会把这些下拉按钮放在一个盒子里(我希望它没问题？)。我也是 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/

25 4 0
文章推荐： javascript - 导航菜单中的下划线过渡
文章推荐： javascript - 在 Typescript 中向基类添加扩展
文章推荐： javascript - d3js中椭圆边上的元素
文章推荐： html - Css/Html 删除左侧边框和我的无序列表之间的空格
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com