课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

帮忙看一下为什么右侧的部分没办法浮动上去？怎么改？

来源：4-1 编程挑战

慕粉4349307

2016-12-10 20:55

<!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>某管理系统</title>

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">


<!--[if lt IE 9]>

<script src="js/html5shiv.js"></script>

<script src="js/respond.min.js"></script>

<![endif]-->

<style>

body{padding:50px 0;}

.left{background-color: #ddd;padding:10px 0;}

.nav-pills{margin:10px 0;}

.nav-pills li a{border-radius:0;}

.right{padding:20px;}

.right .page-header{margin-top:0}

#two{overflow:hidden;}


</style>


</head>


<body>

<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">

  <div>

    <div>

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs" aria-expanded="false">

        <span>Toggle navigation</span>

        <span></span>

        <span></span>

        <span></span>

      </button>

      <a href="#">某管理系统</a>

    </div>

    <div class="collapse navbar-collapse " id="bs">

      <ul class="nav navbar-nav">

        <li><a href="#">首页<span>(current)</span></a></li>

        <li>

          <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">功能<span></span></a>

          <ul>

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li role="separator"></li>

            <li><a href="#">Separated link</a></li>

            <li role="separator"></li>

            <li><a href="#">One more separated link</a></li>

          </ul>

        </li>

        <li><a href="#">帮助</a></li>

      </ul>

      <form class="navbar-form navbar-right">

        <div>

          <input type="text" placeholder="用户名">

          <input type="text" placeholder="密码">

        </div>

        <button type="submit" class="btn btn-default">登录</button>

      </form>

    </div>

  </div>

</nav>


<div id="one">

  <div id="two">

    <div class="col-sm-3 col-md-2 left">

      <ul class="nav nav-pills nav-stacked">

        <li><a href="#">首页</a></li>

      </ul>    

      <ul class="nav nav-pills nav-stacked">    

        <li><a href="#">信息建立</a></li>

        <li><a href="#">信息查询</a></li>

        <li><a href="#">信息管理</a></li>

      </ul>    

      <ul class="nav nav-pills nav-stacked">    

        <li><a href="#">设置</a></li>

        <li><a href="#">帮助</a></li>

      </ul>

    </div>

    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 right">

      <h1>管理控制台</h1> 

      <p>

          <button type="button" class="btn btn-lg btn-default" >操作1</button>

          <button type="button" class="btn btn-lg btn-primary">操作2</button>

          <button type="button" class="btn btn-lg btn-success">操作3</button>

          <button type="button" class="btn btn-lg btn-info">操作4</button>

          <button type="button" class="btn btn-lg btn-warning">操作5</button>

          <button type="button" class="btn btn-lg btn-danger">操作6</button>

      </p>

      <div>

        <div>

          <div class="panel panel-primary">

          <div>

            <h3>最新提醒</h3>

          </div>

          <div>

            <div class="alert alert-success" role="alert">

<strong>提示</strong>您的订单（2014001）已经审批通过！

            </div>

            <div class="alert alert-danger" role="alert">

<strong>提示</strong>您的订单（2014002）被打回！

            </div>

            <div class="alert alert-warning" role="alert">

<strong>提示</strong>您的订单（2013001）客户付款延迟！

            </div>

           </div>

          </div> 

        </div>

        <div>

            <div class="panel panel-primary">

    <div>

       <h3>我的任务</h3>

    </div>

<div>

     <ul class="nav nav-pills nav-stacked" role="tablist">

       <li role="presentation">

         <a href="#" class="alert alert-info">

          <span class="badge pull-right">42</span>

          订单审批

         </a>

       </li>

       <li role="presentation">

         <a href="#" class="alert alert-info">

          <span class="badge pull-right">20</span>

          收款确认

         </a>

       </li>

       <li role="presentation">

        <a href="#" class="alert alert-info">

         <span class="badge pull-right">10</span>

         付款确认

        </a>

       </li>

     </ul>

    </div>

        </div>

      </div>

    </div>

    <div>

 <div>

  <div class="panel panel-primary">

   <div>

   <h3>最新订单</h3>

   </div>

  <div>

   <table class="table table-striped">

     <thead>

      <tr>

       <th>#</th>

       <th>产品</th>

       <th>数量</th>

       <th>总金额</th>

       <th>业务员</th>

      </tr>

     </thead>

     <tbody>

      <tr>

       <td>1</td>

       <td>Apple Macbook air</td>

       <td>10</td>

       <td>80000</td>

       <td>王小贱</td>

      </tr>

      <tr>

       <td>2</td>

       <td>Apple iPad air</td>

       <td>20</td>

       <td>65000</td>

       <td>尹开花</td>

      </tr>

      <tr>

       <td>3</td>

       <td>Apple Macbook pro</td>

       <td>5</td>

       <td>50000</td>

       <td>刘老根</td>

      </tr>

     </tbody>

   </table>

    <p><a class="btn btn-primary" href="#" role="button">查看详细&raquo;</a></p>

   </div>

  </div>

</div>

<div>

  <div class="panel panel-primary">

   <div>

    <h3>工程进度</h3>

   </div>

  <div>

    <h3><span class="label label-primary">水井挖掘工程</span></h3>


<div>

    <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span>80% Complete</span>

</div>

</div>

<h3><span class="label label-danger">基建工程</span></h3>


<div>

<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span>30% Complete (danger)</span>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</body>

</html>



写回答 关注

1回答

  • 魔帝
    2016-12-12 09:34:49

    第一：<div class="form-group">
       <input type="text" placeholder="用户名">
       <input type="text" placeholder="密码">
    </div>
    <button type="submit" class="btn btn-default">登录</button>

    你这段代码<div class="form-group">这部分没有class类，是无法运用bootstrap的样式的，所以导致你的“登录”不能在右边

    第二：<div class="col-md-6">
       <div class="panel panel-primary">
           <div>
               <h3>我的任务</h3>
           </div>
           <div class="panel-body">

    这部分<div class="col-md-6">，<div class="panel-body">，同样是类的问题，你的代码没有，就会出现问题，要吗自己写css的样式，想要用bootstrap，就要遵守他的规则，再则就是你自己编写属于你的bootstrap

    最后两个栏同理，你自己试一下，加深印象，建议去看bootstrap的官网手册，有中文网的，百度一下就找到了。


    1 0

    慕粉4349...

    你说的这2个问题 我实际的代码中是加了样式的的，复制过来就没了 不能浮动不是这个问题。 不过还是谢谢你的回答

    2016-12-12 13:38:32

    共 1 条回复 >

基于bootstrap的网页开发

Bootstrap框架的基础教程，学会用Bootstrap前端框架搭建网页

187669 学习 · 734 问题

查看课程

相似问题

右侧部分遮盖左侧 是什么原因

回答 1

col-md-offset-2怎么使右侧管理控制台部分向左移动了,不应该是向右吗

回答 1

求帮忙看一下为什么下拉菜单出不来？

回答 1

请帮忙看下为什么折叠导航效果没出来

回答 1

怎么让左侧导航栏跟右边一样高？

回答 2

打开慕课网App查看更多内容