堆栈内存溢出
  繁体   English   中英

无法将标题图标与引导程序中的正文对齐

[英]cannot align the header icon with body text in bootstrap

 原文  2016-12-23 14:59:50  7   1    css/ twitter-bootstrap/ css3

问题描述

我在使用Bootstrap时遇到了一个非常令人沮丧的问题。 我有一些标题和正文的标题和正文。 我的标题两侧有两个图标，在我的示例中，我有几个带有某些标题（例如业务）的故事。 我希望标题（业务）与右侧的图标对齐。 因此，“业务”应该恰好在标题中我的右图标开始的位置开始，并且我想通过自举实现这一点，以保持响应能力。 以下是我的代码的jsfiddle示例：

jsfiddle

这是我的代码： 

<!DOCTYPE html>
<html lang="en">
 <head>
 <title>Bootstrap Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">     </script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">   </script>
<style>
  .grey-rule {
    padding: 0px;
    border-bottom: 3px solid #f0f3f7;
    }

  .grey-rule hr {
     display: block;
     margin-top: 0px;
     margin-bottom: 0px;
     border-top: 10px solid #E5E8EC;
     }

 .story-label {
   font-weight: bold;
   font-size: 24px;
   color: #7F8DA2;
  padding: 8px 0px 12px 0px;
  } 

 .header {
    font-weight: bold;
     font-size: 30px;
     background-color: #4070CB;
     color: #EFF0F2;
     padding: 15px 0;
  }

 .center {
    text-align: center;
  }

 .txt {
   align-items: center;
   display: flex;
   text-align: center;
   justify-content: center;
  }

 .color1 {
    background-color: yellow;
  }

  .color2 {
     background-color: orange;
   }

  .rightImg {
    margin-right: 30px;
    margin-left: 12px;
  }

 .leftImg {
    margin-right: 12px;
    margin-left: 30px;
  }

  .header a {
     color: white;
     font-size: larger;
   }
  </style>
  </head>
  <body>

<div id="mainContainer" class="container-fluid">
    <div data-reactroot="">
        <div class="container-fluid col-sm-offset-1">
            <div class="row">
                <div class="col-xs-12 col-sm-10 header">
                    <div class="row">
                        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-1 center">
                            <a href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
                        </div>
                        <div
                            class="col-lg-10 col-md-8  col-sm-8  hidden-xs  visible-sm visible-md visible-lg txt">TEST</div>
                        <div
                            class="col-lg-10 col-md-8  col-sm-8 col-xs-8 visible-xs hidden-sm hidden-md hidden-lg txt"></div>
                        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-1 center">
                            <a href="#"><span class="glyphicon glyphicon-phone"></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-10 col-md-3 col-lg-3 color1">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12">
                            <div class="row">
                                <div class="col-xs-12 col-sm-12 grey-rule">
                                    <hr>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 col-sm-12 story-label">
                                    <div class="row">
                                        <div class="col-xs-2 center">Business</div>
                                        <div class="col-lg-10 col-md-8  col-sm-8 col-xs-8 txt"></div>
                                        <div
                                            class="col-xs-2 col-sm-2 col-md-2 col-xs-8 col-lg-1 center">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-10 col-md-4 col-lg-4 color2">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12">
                            <div class="row">
                                <div class="col-xs-12 col-sm-12 grey-rule">
                                    <hr>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 col-sm-12 story-label">
                                    <div class="row">
                                        <div class="col-xs-2 center">Business</div>
                                        <div class="col-lg-10 col-md-8  col-sm-8 col-xs-8 txt"></div>
                                        <div
                                            class="col-xs-2 col-sm-2 col-md-2 col-xs-8 col-lg-1 center">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-10 col-md-3 col-lg-3 color1">.col-sm-4</div>
            </div>
        </div>
    </div>
</div>

有人可以帮忙吗？ 我做对了吗？

*************更新**************************************

只是为了响应，我不想使用margin-left，而是希望标题图标和文本在所有屏幕尺寸上都对齐

1 个解决方案

解决方案1
 0  2016-12-23 16:12:37

您没有正确使用引导程序类。 每个元素使用一个.col类。 防爆。 .col-sm-3样式将以768px断开，.col-med-3样式将以992px断开，以此类推。

下面，我整理了您的标记，以使您知道如何进行标记。

这是结果的屏幕截图： http : //screencast.com/t/yb7UvAaSs 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.grey-rule {
    padding: 0px;
    border-bottom: 3px solid #f0f3f7;
}

.grey-rule hr {
    display: block;
    margin-top: 0px;
    margin-bottom: 0px;
    border-top: 10px solid #E5E8EC;
}

.story-label {
    font-weight: bold;
    font-size: 24px;
    color: #7F8DA2;
    padding: 8px 0px 12px 0px;
}

.header {
    font-weight: bold;
    font-size: 30px;
    background-color: #4070CB;
    color: #EFF0F2;
    padding: 15px 0;
}

.center {
    text-align: center;
}

.txt {
    align-items: center;
    display: flex;
    text-align: center;
    justify-content: center;
}

.color1 {
    background-color: yellow;
}

.color2 {
    background-color: orange;
}

.rightImg {
    margin-right: 30px;
    margin-left: 12px;
}

.leftImg {
    margin-right: 12px;
    margin-left: 30px;
}

.header a {
    color: white;
    font-size: larger;
}
</style>
</head>
<body>

    <div id="mainContainer" class="container-fluid">

        <div data-reactroot="">

            <div class="container-fluid col-sm-offset-1">

                <div class="row">

                    <div class="col-sm-10">

                        <div class="row">

                            <div class="col-sm-2">

                                <a href="#"><span class="glyphicon glyphicon-align-justify"></span></a>

                            </div>

                            <div class="col-sm-8  hidden-xs visible-sm visible-md visible-lg txt">TEST</div>

                            <div class="col-sm-2">

                                <a href="#"><span class="glyphicon glyphicon-phone"></span></a>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="row">

                    <div class="col-sm-10 color1">

                        <div class="row">

                            <div class="col-sm-12">

                                <div class="row">

                                    <div class="col-sm-12 grey-rule">

                                        <hr>

                                    </div>

                                </div>

                        <div class="row">

                                    <div class="col-sm-2">

                                            <div>Test</div>

                                    </div>

                                    <div class="col-sm-8">

                                            <div>Test</div>

                                    </div>

                                    <div class="col-sm-2">

                                            <div>Business</div>

                                    </div>

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

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

</body>
</html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Bootstrap 4：按钮将文本与图标对齐 Bootstrap-手机标题中的右对齐图标按钮 将表头文本与表正文文本对齐？ header 文本右侧的垂直对齐图标 Bootstrap Align ICON不会与文本垂直居中 在自定义引导按钮中将文本与图标字体对齐 带有文本中心问题的垂直对齐图标 Bootstrap 将导航栏图标与bootstrap 3中的文本对齐？ 如何在Bootstrap 3中使文本旁边的图标垂直对齐 Bootstrap - 下拉菜单将图标与文本对齐
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM