twitter-bootstrap - 无法在 Bootstrap 中将标题图标与正文对齐

标签 twitter-bootstrap css

我正面临一个非常令人沮丧的 Bootstrap 问题。我有一个带有一些标题和文本的标题和正文。我在两侧的标题中有两个图标，在我的示例中，我有几个带有某些标题的故事，例如业务。我希望我的标题(业务)与右侧的图标左对齐。所以“业务”应该从我在标题中正确的图标开始的地方开始，我想通过 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，我希望标题图标和文本在所有屏幕尺寸下对齐

最佳答案

您没有正确使用 Bootstrap 类。每个元素使用一个 .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>

关于twitter-bootstrap - 无法在 Bootstrap 中将标题图标与正文对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41303653/

上一篇：javascript - 向上展开列表覆盖其他内容

下一篇：css - 管理父>子悬停CSS上的事件

相关文章：

javascript - Angular-bootstrap-slider 以字符串形式获取值

javascript - 如何在模态内单击按钮时使用 jQuery 或 javascript 获取 Bootstrap 模态的数据值？

javascript - Div 文本垂直填充

html - 将嵌入式聊天和流与 css 对齐

jquery - Bootstrap 3 事件状态导致导航栏上的错误

jquery - Bootstrap 轮播现在不工作

javascript - 如何使用固定的 Navbar 滚动到正确的 div

html - 类输入组在 Firefox 和 IE 中不显示占位符或接受输入

css - 无法将此 div 置于 div 中

html - Dreamweaver 缩小代码问题

©2024 IT工具网  联系我们