Question

我在超小型设备上的bootstrap列上遇到问题。在超小型设备中，引导列溢出并更改对齐。

我正在附加超小型设备和其他设备的截图。

超小型设备的屏幕截图：

其他设备的屏幕截图（正常工作）：

下面的代码是bootstrap代码。

<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="manu.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">

<div class="header row"> 
<div class="time_remain col-sm-6 col-xs-6 col-md-6 col-ld-6">00 Min 00 Sec</div>

<div class="logout col-sm-6 col-xs-6 col-md-6 col-ld-6">Logout</div>
</div>



  <div class="row frame">
    <div class="col-sm-9 col-xs-9 col-md-9 col-ld-9 question_wrapper">

            <div class="row questions">
                1. This is first one?        
            </div>

            <div class="row no-gutters choice_label_choice">            
                <div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
                A
                </div>
                <div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
                First
                </div>

            </div>




            <div class="row no-gutters choice_label_choice">
                <div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
                B
                </div>

                <div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
                    Second
                </div>
            </div>


            <div class="row no-gutters choice_label_choice">
                <div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
                    C
                </div>

                <div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
                    Third
                </div>
            </div>

            <div class="row no-gutters choice_label_choice">
            <div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
                D
            </div>

            <div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
                Fourth
            </div>
            </div>      
      </div>    
    <div class="col-sm-3 col-xs-3 col-md-3 col-ld-3 question_status_wrapper">.col-sm-3</div>
  </div>

    <div class="row status_bar">
    <div class="col-sm-3 col-xs-3 col-md-1 col-ld-1 time_bar"><div>00 MIN 00 SEC</div> </div>
    <div class="col-sm-3 col-xs-3 col-md-1 col-ld-1 time_bar"><div>Back</div></div>
    <div class="col-sm-3 col-xs-3 col-md-1 col-ld-1 time_bar"><div>Next</div></div>
    <div class="col-sm-0 col-xs-0 col-md-6 col-ld-6 "></div>
    <div class="col-sm-3 col-xs-3 col-md-1 col-ld-1  time_bar"><div>Submit</div></div>
    </div>


</div>

</body>
</html>

css代码如下。

.frame
{
    height: 70vh;
}

.question_wrapper
{
    height: inherit;
    background-color: beige;
    overflow: auto;
    padding-left: 20px;
    padding-right: 20px;

}
.time_remain
{
padding-top: 5px;
color: white;
text-align: left;
padding-left: 20px;

}

.logout
{
    color: white;
    text-align: right;
    padding-right: 20px;
    padding-top: 5px;

}

.question_status_wrapper
{
    height: inherit;
    background-color: bisque;
    overflow: auto;
}

.header
{
    height: 10vh;
    background-color: #333333;
    color: white;
}

.status_bar
{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 20vh;
    background-color : #333333;
    display: flex;
}

.questions
{
    margin-top: 20px;
    margin-left: 20px;
}

.answer_choice_label_div
{
    background-color: black;
    color: white;
    text-align: center;
    height: inherit;
    vertical-align: inherit;
    border-style: solid;
    border-width: 2px;
}

.answer_choice_div
{
    background-color: white;
    color: black;
    height: inherit;
    vertical-align: inherit;
    border-style: solid;
    border-width: 2px;
    overflow: inherit;
}

.answer_choice_div:hover
{
    background-color: #C6FFF1;
    color: black;
    height: inherit;
    vertical-align: inherit;
    border-style: solid;
    border-width: 2px;
    overflow: inherit;
}

.choice_label_choice
{
    margin-top: 10px;
    margin-bottom: 10px;
    min-height: 10vh;
    height: 50px;
    vertical-align: middle;
}

.time_bar
{
    background-color: aliceblue;
    color: black;
    align-self: center;
    text-align: center;
    margin-left: 10px;
    min-height: 6vh;
    display: inline;
    vertical-align: middle;
    margin-right: 10px;
    padding-top: 7px;
}

我检查了引导网格并没有发现任何问题。请帮忙。

Answer 1

使用媒体查询，将此代码粘贴到style.css

中

@media only screen and (max-width: 580px) 
 {
  .answer_choice_div 
       {
        width: 83%;
            }
    .answer_choice_label_div
          {

           width: 10%;
          }
  }

Answer 2

将xs用于超小型设备。用于小型设备的sm和用于中型设备的md。

请按此链接选择网格选项

Grid Options - Bootstrap

超小型设备中的引导列问题

2 个答案: