Question

小提琴更好理解

http://jsfiddle.net/fctqp5bt/8/

我的网页上有3列。

导航栏的第一列。

箭头glyphicon的第二列。

小组第三栏。

但是，glyphicon和面板没有对齐。这是什么问题？

enter image description here

代码：

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">
    <title>Subham Soni</title>

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

    <!-- HTML5 Shim and Respond.js 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>
    <div class="page-header head" id="header">
    <div class="hbg"></div>
    <h1 style="padding-top:10px;padding-left:10px;font-family:'Whiteboard Modern Demo','Arial';"><center>Subham Soni</center></h1>
    <p id="import"><span style="color:rgb(190,0,255);">import</span> java.subhamsoni.*;</p>
    <p id="include"><span style="color:rgb(190,0,255);">#include</span>&nbsp;<span style="color:rgb(255,0,255);">&lt;subhamsoni.h&gt;</span></p>
    <p id="echo"><span style="color:rgb(92,51,23);">echo</span>&nbsp;<span style="color:rgb(255,0,255);">'Subham Soni'</span></p>
    </div>
    <div class="container-fluid" id="maincontent">
    <div class="row">
        <div class="col-md-2 menu">
                <ul class="nav nav-pills nav-stacked">
              <li class="active"><a href="#">About Me</a></li>
  <li><a href="#">Education</a></li>
  <li><a href="#">Projects</a></li>
                </ul>
                </div>
                <div class="col-md-0 content">
                <span class="glyphicon glyphicon-hand-right"></span>
                </div>
        <div class="col-md-8">
                <div class="panel panel-default">
            <div class="panel-heading">
                    <h3 class="panel-title">About Me</h3>
            </div>
        <div class="panel-body">
                 Panel content
        </div>
                </div>
                </div>
    </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

的style.css

.head{
position: relative;
z-index: 1;
margin-top:10px;
height: 170px;
}

.head .hbg
{
position: absolute;
top: 0px;
left: 0px;
background: url('hbg.png');
background-size: 100% 100%;
opacity: 0.3;
width: 100%;
height: 100%;
z-index: -1;
}

#include
{
font-size: 20px;
font-weight: bold;
position: relative;
left: 29%;
top: -38%;
}

#import
{
font-size: 30px;
font-weight: bold;
position: relative;
left: 65%;
top: -20%;
display:block;
transform: rotate(-8deg); 
}

#echo
{
font-weight: bold;
font-size: 20px;
position: relative;
top: -25%;
left: 12%;
}

Answer 1

您的引导列存在问题。你想要12个。

我建议在md-8中移动glyphicon并使其成为md-10，这样你总共有12个col。

然后只需在你的glyphicon中添加一个css类，并在新md-10列的左侧给它一个绝对位置。

这是新的HTML代码：

<div class="col-md-10">
    <span class="glyphicon glyphicon-hand-right special"></span>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">About Me</h3>
            </div>
            <div class="panel-body">
                    Panel content
            </div>
        </div>
    </div>
</div>

新的css类：

.special {
  position: relative;
  top: 0;
  left: -5px;
}

Answer 2

添加边距顶部以对齐图标

margin-top:-20px;

对齐bootstrap glyphicon

2 个答案: