右列未完全对齐

时间：2016-05-14 05:51:00

标签： javascript html css twitter-bootstrap responsive-design

我正在为项目创建一个lms，

但问题是日历没有正确对齐。它有点对齐屏幕中间。我希望它能够向右转，但目前还没有发生。

我正在使用Bootstrap。

这是CODEPEN链接

$(function() {
    $('#nav-wrapper').height($("#nav").height());
    
    $('#nav').affix({
        offset: { top: $('#nav').offset().top }
    });
});
#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}

#nav > .navbar-inner {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
}

body{
	margin:0;
	padding:0;
	
	
}

.nav-sidebar { 
    width: 100%;
    padding: 0px 0; 
   /* border: 1px solid #ddd; */
}
.nav-sidebar a {
    color: #333;
    -webkit-transition: all 0.08s linear;
    -moz-transition: all 0.08s linear;
    -o-transition: all 0.08s linear;
    transition: all 0.08s linear;
    -webkit-border-radius: 4px 0 0 4px; 
    -moz-border-radius: 4px 0 0 4px; 
    border-radius: 4px 0 0 4px; 
}
.nav-sidebar .active a { 
    cursor: default;
    background-color: #428bca; 
    color: #fff; 
    text-shadow: 1px 1px 1px #666; 
}
.nav-sidebar .active a:hover {
    background-color: #428bca;   
}
.nav-sidebar .text-overflow a,
.nav-sidebar .text-overflow .media-body {
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis; 
}

/* Right-aligned sidebar */
.nav-sidebar.pull-right { 
    border-right: 0; 
    border-left: 1px solid #ddd; 
}
.nav-sidebar.pull-right a {
    -webkit-border-radius: 0 4px 4px 0; 
    -moz-border-radius: 0 4px 4px 0; 
    border-radius: 0 4px 4px 0; 
}

.center_row{
	
	 max-width: 800px;
	    margin-top: -30px;
  margin-left:25px;
    margin-right: 150px;
  color:#428bca;
  text-transform: capitalize;
}

.left-side{
	float:right;	
}

.navbar > .container {width:auto;}






* {box-sizing:border-box;}
ul {list-style-type: none;}
body {font-family: Verdana,sans-serif;}

.month {
    padding: 70px 25px;
    width: 100%;
    background: #428bca;
}

.month ul {
    margin: 0;
    padding: 0;
}

.month ul li {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.month .prev {
    float: left;
    padding-top: 10px;
}

.month .next {
    float: right;
    padding-top: 10px;
}

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

.weekdays li {
    display: inline-block;
    width: 13.6%;
    color: #666;
    text-align: center;
}

.days {
    padding: 10px 0;
    background: #eee;
    margin: 0;
}

.days li {
    list-style-type: none;
    display: inline-block;
    width: 13.6%;
    text-align: center;
    margin-bottom: 5px;
    font-size:12px;
    color: #777;
}

.days li .active {
    padding: 5px;
    background: #428bca;
    color: white !important
}

/* Add media queries for smaller screens */
@media screen and (max-width:720px) {
    .weekdays li, .days li {width: 13.1%;}
}

@media screen and (max-width: 420px) {
    .weekdays li, .days li {width: 12.5%;}
    .days li .active {padding: 2px;}
}

@media screen and (max-width: 290px) {
    .weekdays li, .days li {width: 12.2%;}
}
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="index.js"></script> 
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
   <script src="  http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css"></script>
</head>


<body>
<!---FIXED NAV BAR START --->
<nav class="navbar navbar-fixed-top navbar-default" role="navigation" container="false">
  <div class="container">    
    <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsable">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a href="#" class="navbar-brand">
  <img src="aaa.gif" class="img-responsive" alt="Cinque Terre" width="70" height="35">
</a>
</div><div class="collapse navbar-collapse" id="navbar-collapsable">  
<ul class="nav navbar-nav navbar-right">
<p class="navbar-text">Logged in as Some Person</p>
<li>
  <a href="/log_out">
    Log out
  </a>
</li>

</ul>
</div>
</div>
</nav>
<!---FIXED NAV BAR END --->


<br>
<br>
<br>
<br>
<div class="center_row">
<div class="row ">
<div class="col-md-8">
<div class="right_side">
<h3>LEARNING MANAGEMENT SYSTEM OF AAA</h3>
</div>
</div>

<div class="col-md-4">
<div class="left_side" style="margin-left:100px;margin-right:-500px;">
<h3 id="demo" class="text-right" style="text-transform: uppercase; "></h3>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();
</script>
</div>
</div>

</div>
</div>


<br>

<!-----LEFT HAND NAV BAR-->
<div class="row">
<div class="col-md-4">

<div class="container">
	
    
    <div class="row">
        <div class="col-md-2">
            <nav class="nav-sidebar">
                <ul class="nav">
                    <li class="active"><a href="javascript:;"><span class="glyphicon glyphicon-paperclip"></span> AAA Research Publications</a></li>
                    <li><a href="javascript:;">AAA Quaterly News</a></li>
                    <li><a href="javascript:;">Student Handbooks</a></li>
                    <li><a href="javascript:;">Award Handbooks</a></li>
					<li><a href="javascript:;">Regulations</a></li>
					<li><a href="javascript:;">Examination Time Tables</a></li>
					<li><a href="javascript:;">Class Time Tables</a></li>
					<li><a href="javascript:;">Contact Us</a></li>
                    <li class="nav-divider"></li>
                    <li><a href="javascript:;"><i class="glyphicon glyphicon-off"></i> Sign in</a></li>
                </ul>
            </nav>
        </div>
		
        <div class="col-md-8" >
          <h3 style="color: #428bca;">LATEST NEWS</h3>
        </div>
		
		
		<div class="col-md-2" id="pull-right" style="float:right !important;">
		





<div class="month">      
  <ul>
    <li class="prev">❮</li>
    <li class="next">❯</li>
    <li style="text-align:center">
      August<br>
      <span style="font-size:18px">2016</span>
    </li>
  </ul>
</div>

<ul class="weekdays">
  <li>Mo</li>
  <li>Tu</li>
  <li>We</li>
  <li>Th</li>
  <li>Fr</li>
  <li>Sa</li>
  <li>Su</li>
</ul>

<ul class="days">  
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li><span class="active">10</span></li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
</ul>




		</div>
		
		
		
    </div>
</div>



</div>
</div>

<!-----LEFT HAND NAV BAR END-->





</body>
</html>

修改 我想要的是如下，

enter image description here

2 个答案:

答案 0 :(得分：2)

根据我的观点，您应该在使用col-md-4时更改列网格，但正如您所说，您需要它，然后使用col-md-12和container-fluid来获得所需的结果。< / p>

容器始终具有不同分辨率的固定宽度（以px为单位），但如果您想要全宽，请尝试使用container-fluid，根据所有屏幕，这将占用100％。

检查我的codepan。我删除了行，因为它需要额外的余量，我已经应用容器流体来获得所需的输出。希望它会有所帮助。

注意在.navbar-brand课程中，您使用的是徽标图片的修正高度（50px）。要么增加导航栏的大小，要么删除该高度，以便徽标位于导航栏中。谢谢

答案 1 :(得分：0)

使用以下

更改您的部分 
<!-----LEFT HAND NAV BAR-->
<div class="row">
 <div class="col-md-12">

    <div class="container">
      <div class="col-md-2">
        <nav class="nav-sidebar">
          <ul class="nav">
            <li class="active"><a href="javascript:;"><span class="glyphicon glyphicon-paperclip"></span> AAA Research Publications</a></li>
            <li><a href="javascript:;">AAA Quaterly News</a></li>
            <li><a href="javascript:;">Student Handbooks</a></li>
            <li><a href="javascript:;">Award Handbooks</a></li>
            <li><a href="javascript:;">Regulations</a></li>
            <li><a href="javascript:;">Examination Time Tables</a></li>
            <li><a href="javascript:;">Class Time Tables</a></li>
            <li><a href="javascript:;">Contact Us</a></li>
            <li class="nav-divider"></li>
            <li><a href="javascript:;"><i class="glyphicon glyphicon-off"></i> Sign in</a></li>
          </ul>
        </nav>
      </div>

      <div class="col-md-8">
        <h3 style="color: #428bca;">LATEST NEWS</h3>
      </div>


      <div class="col-md-4" id="pull-right" style="float:right !important;">


        <div class="month">
          <ul>
            <li class="prev">❮</li>
            <li class="next">❯</li>
            <li style="text-align:center">
              August<br>
              <span style="font-size:18px">2016</span>
            </li>
          </ul>
        </div>

        <ul class="weekdays">
          <li>Mo</li>
          <li>Tu</li>
          <li>We</li>
          <li>Th</li>
          <li>Fr</li>
          <li>Sa</li>
          <li>Su</li>
        </ul>

        <ul class="days">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li><span class="active">10</span></li>
          <li>11</li>
          <li>12</li>
          <li>13</li>
          <li>14</li>
          <li>15</li>
          <li>16</li>
          <li>17</li>
          <li>18</li>
          <li>19</li>
          <li>20</li>
          <li>21</li>
          <li>22</li>
          <li>23</li>
          <li>24</li>
          <li>25</li>
          <li>26</li>
          <li>27</li>
          <li>28</li>
          <li>29</li>
          <li>30</li>
          <li>31</li>
        </ul>


      </div>


  </div>


 </div>
</div>

<!-----LEFT HAND NAV BAR END-->

如果它看起来不像您想要的那样，请告诉我。

相关问题
最新问题