Question

我的示例html页面上有一些表单字段，datepickers和下拉列表。单击下拉菜单时，它显示在屏幕左侧，而不是显示在中心，因为所有其他内容都是。如何把它放在页面的中心？

Html代码：

  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Form</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/style.css" rel="stylesheet">
    <link href="./datepicker.css" rel="stylesheet">



    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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>
    <center><form>


        <div class="input-append date" data-date-format="dd-mm-yyyy" >
           <label for="dp1">Starting Date</label> <br>
          <input id="dp1" size="16" type="text" value="dd/mm/yyyy"/> 
          <span class="add-on"><i class="glyphicon glyphicon-calender" id="cal1"></i></span>
        </div>


         <div class="dropdown">
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
           Number of students :
          <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
         <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
          <li><a href="#">7</a></li>
          <li><a href="#">8</a></li>
          </ul>
        </div><br><br><br><br><br>
        <div class="form-group">
            <label for="inputName">Name of the student</label>
            <input type="text" class="form-control" id="inputName" placeholder="">
        </div> 

        <div class="form-group">
            <label for="inputFname">Father's Name</label>
            <input type="text" class="form-control" id="inputFname" placeholder="">
        </div> 

        <div class="input-append date" data-date="" data-date-format="dd-mm-yyyy">
          <label for="dp2">Date of Birth</label> <br>
          <input id="dp2" size="16" type="text" value="dd/mm/yyyy"/>
          <span class="add-on"><span class="glyphicon glyphicon-calender" id="cal2"></span></span>
        </div>

        <div class="form-group">
          <label for="inputAddress">Address of the student</label>
          <textarea type ="text" class = "form-control" id = "inputAddress" rows = "8" placeholder = "" ></textarea>
          <span id="addressSpan"></span>
        </div>

        <div class="form-group">
          <label for="inputObjects">hobbies</label>
          <textarea type ="text" class = "form-control" id = "inputObjects" rows = "8" placeholder = "" ></textarea>
          <span id="objectsSpan"></span>
        </div>

         <div class="form-group">
            <label for="inputschoolName">Name of the school</label>
            <input type="text" class="form-control" id="inputschoolName" placeholder="">
        </div>

        <div class="input-append date" data-date="" data-date-format="dd-mm-yyyy">
          <label for="dp3">Date of Commencement of the internship</label> <br>
          <input id="dp3" size="16" type="text" value="dd/mm/yyyy"/>
          <span class="add-on"><i class="glyphicon glyphicon-calender" id="cal3"></i></span>
        </div>

        <div class="form-group">
          <label for="inputOffice">address of the school</label>
          <textarea type ="text" class = "form-control" id = "inputOffice" rows = "8" placeholder = "" ></textarea>
          <span id="officeSpan"></span>
        </div>

        <div class="form-group">
            <label for="inputWill">like school?</label>
            <input type="text" class="form-control" id="inputWill" placeholder="">
        </div>

        <div class="form-group">
          <label for="inputContribution">achievements</label>
          <input type="text" class="form-control" id="inputContribution" placeholder="">
        </div>

        <div class="form-group">
          <label for="inputSalary">fees</label>
          <input type="text" class="form-control" id="inputSalary" placeholder="">
        </div>

         <div class="form-group">
          <label for="inputaccolades">accolades</label>
          <input type="text" class="form-control" id="inputaccolades" placeholder="">
        </div>

    </form></center>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="./js/jquery-1.11.3.js"></script>
    <script>

    $(document).ready (function (){
       $("#dp1").datepicker();
      $("#dp2").datepicker();
      $('#dp3').datepicker();
      $('.dropdown-toggle').dropdown()
    });

    </script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="./js/bootstrap.min.js"></script>
    <script src="./bootstrap-datepicker.js"></script>  </body>
</html>

CSS：

form .form-group {
    width : 500px;
}

.datepicker:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 190px;
}

.datepicker:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
top: -6px;
left: 191px;
}

非常感谢任何帮助。提前致谢

Answer 1

有很多方法可以解决这个问题：

此处的解决方案：http://jsfiddle.net/lotusgodkk/GCu2D/820/

<强> CSS：

.dropdown, .dropup {
    position: relative;
    display: inline-block;
}

或者

.dropdown, .dropup {
    position: relative;
    width: 250px;//any value
}

说明：下拉容器没有定义的宽度，因此它会自动占据全宽。当您单击下拉列表时，默认情况下，下拉菜单将自己定位到dropdown类的最左侧，在此情况下，该类是屏幕的左边缘。定义下拉菜单元素的宽度，以便下拉菜单可以自己定位，否则只需使用display:inline-block，它将根据内容自动获取宽度。

正如评论中指出的那样，试着摆脱center标签

Bootstrap下拉菜单未出现在屏幕中间

1 个答案: