Question

我使用Bootstrap进行了以下设计。

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>

  <div class="container-fluid parent-vertical-align">
    <div class="container-fluid child-vertical-align" style="width: 99%;">
      <div class="row row-centered">

        <!-- block 1 -->
        <div class="col-md-3 center-block">
            <div>
                <!-- Thumb-nail Image -->
                <div>
                    <img src="img/a.png" class="img-responsive" />
                </div>
                <!-- Status bars -->
                <br/><br/>
                <div class="row">
                    <div class="col-md-3">
                        Passed <br/><br/> 
                        Failed <br/><br/>
                        Skipped <br/>
                    </div>


                    <div class="col-md-9">

                        <div class="progress">
                            <div class="progress-bar progress-bar-success" style="width: 80%">
                            </div>
                        </div>

                        <div class="progress">
                            <div class="progress-bar progress-bar-danger" style="width: 80%">
                            </div>
                        </div>

                        <div class="progress">
                            <div class="progress-bar progress-bar-warning" style="width: 60%">
                            </div>
                        </div>
                    </div>


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


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

 <!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <!--  custom css file -->
    <link rel="stylesheet" href="custom.css" type="text/css"> 
  </body>
  </html>

这是我的自定义css文件

body,html
{
    height: 100%;
}
.parent-vertical-align{
    display: table;
    height: 100%;
    width: 100%;
}
.child-vertical-align{
  width: 100%;
  padding: 1%;
  display: table-cell;
  vertical-align: middle;
  height: 90%;
}

.img-responsive{
    margin: 0 auto;
    height: 20%;
    width: 20%;
}
.center-block{
    display:inline-block;
    float:none;
    text-align:left;
    margin-top: 2%;
    margin-left: 2%;
    border: 1px solid black;
}
.row-centered{
    text-align:center;
}
.progress{
    margin-left: 10%;
}

问题是，当我调整chrome窗口的大小时，设计进度条会转到下一行。请参考此图片：

我希望它完全显示在文本的右侧。它适用于较大的屏幕，但不适用于较小的屏幕。我该如何解决？

Answer 1

bootstrap根据不同的屏幕尺寸提供媒体查询类

使用

col-xs-4 for maximum 768px

col-sm-4 for 768px to 992px
col-md-4 for 992px to 1200px
col-lg-4 for greater than 1200px

body,html
{
    height: 100%;
}
.parent-vertical-align{
    display: table;
    height: 100%;
    width: 100%;
}
.child-vertical-align{
  width: 100%;
  padding: 1%;
  display: table-cell;
  vertical-align: middle;
  height: 90%;
}

.img-responsive{
    margin: 0 auto;
    height: 20%;
    width: 20%;
}
.center-block{
    display:inline-block;
    float:none;
    text-align:left;
    margin-top: 2%;
    margin-left: 2%;
    border: 1px solid black;
}
.row-centered{
    text-align:center;
}
.progress{
    margin-left: 10%;
}

<!DOCTYPE html>
        <html>
  <head>
  </head>

  <body>

  <div class="container-fluid parent-vertical-align">
    <div class="container-fluid child-vertical-align" style="width: 99%;">
      <div class="row row-centered">

        <!-- block 1 -->
        <div class="col-md-3 center-block">
            <div>
                <!-- Thumb-nail Image -->
                <div>
                    <img src="img/a.png" class="img-responsive" />
                </div>
                <!-- Status bars -->
                <br/><br/>
                <div class="row">
                    <div class="col-xs-4 col-sm-3 col-md-3">
                        Passed <br/><br/> 
                        Failed <br/><br/>
                        Skipped <br/>
                    </div>


                    <div class="col-xs-8 col-sm-9 col-md-9">

                        <div class="progress">
                            <div class="progress-bar progress-bar-success" style="width: 75%">
                            </div>
                        </div>


                        <div class="progress">
                            <div class="progress-bar progress-bar-danger" style="width: 75%">
                            </div>
                        </div>


                        <div class="progress">
                            <div class="progress-bar progress-bar-warning" style="width:75%">
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>


      </div>
    </div>
 </div>

 <!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <!--  custom css file -->
    <link rel="stylesheet" href="custom.css" type="text/css"> 
  </body>
  </html>

如何制作文字＆＃34;通过＆＃34;和进度条在较小的视图中显示在一行？

1 个答案: