Twitter bootstrap 在引导中对齐一行中的两个列表_Twitter Bootstrap_Css

Twitter bootstrap 在引导中对齐一行中的两个列表

twitter-bootstrap css

Twitter bootstrap 在引导中对齐一行中的两个列表,twitter-bootstrap,css,Twitter Bootstrap,Css,现在我知道这可能是非常简单，容易和明显的，但我已经敲了我的头两天，试图找出这个问题。谷歌搜索到了一场风暴我试图将页面底部两个列表中的链接对齐，以生成导航栏。我正在使用引导和字体的图标真棒。看起来字体图标比我使用的字体大，导致了错位您可以通过codepen（在全屏模式下或通过移动设备）看到我的问题：在我试图创建的底部导航栏中，右边的图标看起来比左边的文本链接高请记住，我希望一切都能响应，这就是我将字体大小设置为vh的原因有人知道我如何使左链接与右图标垂直对齐吗我尝试过将图标的字体大小设

现在我知道这可能是非常简单，容易和明显的，但我已经敲了我的头两天，试图找出这个问题。谷歌搜索到了一场风暴

我试图将页面底部两个列表中的链接对齐，以生成导航栏。我正在使用引导和字体的图标真棒。看起来字体图标比我使用的字体大，导致了错位

您可以通过codepen（在全屏模式下或通过移动设备）看到我的问题：

在我试图创建的底部导航栏中，右边的图标看起来比左边的文本链接高

请记住，我希望一切都能响应，这就是我将字体大小设置为vh的原因

有人知道我如何使左链接与右图标垂直对齐吗

我尝试过将图标的字体大小设置为比左边链接的小，我尝试过在引导程序中创建两列xs-6，我尝试过在div和ul本身的填充和边距等方面弄乱。到目前为止，一切都不顺利

提前感谢您的帮助。

给您。我扔掉了一些不必要的东西，希望这有帮助

/**/
身体{
背景：url(http://www.desktopimages.org/pictures/2014/1025/1/orig_58711.jpg)无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
.行{
边距：0！重要；
位置：固定；
底部：0；
左：0；
高度：6vh；
宽度：100%；
背景：白色；
}
.a排{
颜色：黑色；
}
.a行：链接{
文字装饰：无；
}
.a排：参观{
文字装饰：无；
}
.a排：悬停{
文字装饰：无；
颜色：灰色；
}
.a行：活动{
文字装饰：无；
}
劳尔街{
文本对齐：居中；
显示：内联块；
}
李先生{
显示：内联块；
}
#列表左，
#右列表{
字体大小：3vh；
线路高度：6vh；
显示：内联块；
宽度：49%；
保证金：0；
填充：0；
}


Alex Wilson-Man，网页设计师，传奇人物

给你。我扔掉了一些不必要的东西，希望这有帮助

/**/
身体{
背景：url(http://www.desktopimages.org/pictures/2014/1025/1/orig_58711.jpg)无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
.行{
边距：0！重要；
位置：固定；
底部：0；
左：0；
高度：6vh；
宽度：100%；
背景：白色；
}
.a排{
颜色：黑色；
}
.a行：链接{
文字装饰：无；
}
.a排：参观{
文字装饰：无；
}
.a排：悬停{
文字装饰：无；
颜色：灰色；
}
.a行：活动{
文字装饰：无；
}
劳尔街{
文本对齐：居中；
显示：内联块；
}
李先生{
显示：内联块；
}
#列表左，
#右列表{
字体大小：3vh；
线路高度：6vh；
显示：内联块；
宽度：49%；
保证金：0；
填充：0；
}


Alex Wilson-Man，网页设计师，传奇人物

您是否尝试过垂直对齐：顶部？如果代码笔不错，但不够好，您应该在问题中包含相关代码。我已经包括了代码。谢谢你的提示。你试过垂直对齐：顶部吗？你应该在问题中包含相关的代码，前提是代码笔很好，但不是很好。我已经包括了代码。谢谢你的提醒。哇。看起来很完美。非常感谢你！所以，如果我错了，请纠正我，但你只是去除了容器液体和一些不必要的div。然后，为了修复大小差异，您在列表右侧弹出了字体大小和行高。对吗？我仍然不明白为什么它以前不起作用，因为我读到的大部分内容都告诉我要用bootstrap将所有东西包装在一个容器中。你能详细解释一下为什么这是有效的，而之前的代码没有。第一部分是的，字体大小和更大的行距会自动居中。我还检查了你的版本，现在你的酒吧似乎不太在底部，位置固定，底部0它粘在那里。：）如果你能记下我的回答对你有帮助，我将不胜感激：）哇。看起来很完美。非常感谢你！所以，如果我错了，请纠正我，但你只是去除了容器液体和一些不必要的div。然后，为了修复大小差异，您在列表右侧弹出了字体大小和行高。对吗？我仍然不明白为什么它以前不起作用，因为我读到的大部分内容都告诉我要用bootstrap将所有东西包装在一个容器中。你能详细解释一下为什么这是有效的，而之前的代码没有。第一部分是的，字体大小和更大的行距会自动居中。我还检查了你的版本，现在你的酒吧似乎不太在底部，位置固定，底部0它粘在那里。：）如果您能指出我的回答对您有帮助，我将不胜感激：）

<http://codepen.io/alexwilson/pen/mAJqWX?editors=1100>

<head>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src="https://use.fontawesome.com/383177a704.js"></script>
    <title>Alex Wilson - Man, Web Designer, Legend</title>
</head>
<body>
  <div class="container-fluid">
        <div class="row headline">
        </div>

            <div class="row">
                    <ul id="list-left">
                        <li><a href="Home.html">Home</a></li>
                        <li><a href="About.html">About</a></li>
            <li><a href="work.html">Work</a></li>
            </ul>
                        <ul id="list-right">
                            <li><a href="https://www.linkedin.com/in/alexwilson33"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
                            <li><a href="https://github.com/AWilso30"><i class="fa fa-github" aria-hidden="true"></i></a></li>
                            <li><a href="https://twitter.com/XZISTTT"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                            <li><a href="https://www.facebook.com/djcastaway"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                            <li><a href="email.com"><i class="fa fa-envelope" aria-hidden="true"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

body,
html,
.container-fluid {
  height: 100%;
  width: 100%;
  margin: 0px !important;
  padding: 0px !important;
}

.headline {
  height: 94%;
  background: url(http://www.desktopimages.org/pictures/2014/1025/1/orig_58711.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.row {
  margin-right: 0px !important;
}
.row a {
  color: black;
}
.row a:link {
    text-decoration: none;
}

.row a:visited {
    text-decoration: none;
}

.row a:hover {
    text-decoration: none;
    color: gray;
}

.row a:active {
    text-decoration: none;
}

.row ul {
  text-align: center;
  display: inline-block;
}

.row li {
  display: inline-block;
}

#list-left {
  font-size: 3vh;
  display: inline-block;
  width: 49%;
  margin: 0;
  padding: 0;
}
#list-right {
  font-size: 3vh;
  display: inline-block;
  width: 49%;
  margin: 0;
  padding: 0;
}