用 boostrap 布局，左边内容，右边是侧边栏，奇怪问题。

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Dive into HTML5

› http://diveintohtml5.org/

这是一个创建于 2843 天前的主题，其中的信息可能已经有所发展或是发生改变。

分左右两个面板，左边是内容面板，右边是侧边栏面板。右边侧边栏面板高度会影响左边 form 表单的上下间距。我是 html5 新手，可能这问题很简单，可是我没法解决，只能求助 V 友。

html 源码：

<!DOCTYPE html>
<html>
<head>
   <title>布局实例</title>
   <link rel="stylesheet" href="css/bootstrap.css" media="all">
   <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.js"></script>
   <meta charset="utf-8"/>
</head>
<body>

   <!-- sider -->
   <div id="sider" style="width:400px; margin-bottom:-3000px; padding-bottom:3000px; background:#f0f3f9; float:right;">
      <div class="panel panel-default">
         <div class="panel-heading">
            <h3 class="panel-title">带有 title 的面板标题</h3>
         </div>
         <div class="panel-body">面板内容</div>
         <div class="panel-body">面板内容</div>
         <div class="panel-body">面板内容</div>
         <div class="panel-body">面板内容</div>
      </div>
   </div>

   <!-- content -->
   <div id="center" style="margin:0 410px 0 210px; background:#ffe6b8; height:600px;">
      <div class="panel panel-default">
         <div class="panel-heading">
            <h3 class="panel-title">
               带有 title 的面板标题
            </h3>
         </div>
         <div class="panel-body">
            <form id='change_pass_form' class='form-horizontal' action='/setting' method='post'>
               <div class='form-group'>
                  <label class='control-label col-md-2' for='old_pass'>当前密码</label>

                  <div class='col-md-6'>
                     <input class='form-control' type='password' id='old_pass' name='old_pass' size='30'/>
                  </div>
               </div>

               <div class='form-group'>
                  <label class='control-label col-md-2' for='old_pass'>当前密码</label>

                  <div class='col-md-6'>
                     <input class='form-control' type='password' id='old_pass' name='old_pass' size='30'/>
                  </div>
               </div>
            </form>
         </div>
   </div>
</body>
</html>

1 条回复 • 2016-07-07 13:20:26 +08:00

notgod

2016-07-07 13:20:26 +08:00 via iPhone

用 row 定位布局
或者 div clear 一次
看下官方文档和演示