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

时间：2016-12-23 14:59:51

标签： 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>

任何人都可以帮忙吗？我是以正确的方式做到的吗？

************* UPDATE ********************************* *

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

1 个答案:

答案 0 :(得分：0)

您没有正确使用引导程序类。每个元素使用一个.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>
相关问题
最新问题