Question

我有以下Bootstrap Framework bootstrap-3.3.6-dist代码，当我在Firefox浏览器中呈现它时，我只在整个屏幕中获得两列。使用此行<div class="clearfix visable-md"></div>的东西我添加了它，因为从大视图到中视图时渲染中出现错误但我不知道为什么在大视图中渲染4列而只是2列正在呈现？

码

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Bootstrap Tutorial</title>

      <!-- Bootstrap -->
      <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">




    </head>
    <body>

     <div class="container">
      <div class="row">

      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
      <h4>Colums 1</h4>
        Had strictly mrs handsome mistaken cheerful. We it so if resolution invitation remarkably unpleasant conviction. As into ye then form. To easy five less if rose were. Now set offended own out required entirely. Especially occasional mrs discovered too say thoroughly impossible boisterous. My head when real no he high rich at with. After so power of young as. Bore year does has get long fat cold saw neat. Put boy carried chiefly shy general. 
        </div>

      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
      <h4>Colums 2</h4>
        Had strictly mrs handsome mistaken cheerful. We it so if resolution invitation remarkably unpleasant conviction. As into ye then form. To easy five less if rose were. mrs discovered too say thoroughly impossible boisterous. My head when real no he high rich at with. 
        </div>


      <div class="clearfix visable-md"></div>

      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
      <h4>Colums 3</h4>
        Had strictly mrs handsome mistaken cheerful. We it so if resolution invitation remarkably unpleasant conviction. As into ye then form. To easy five less if rose were. Now set offended own out required entirely. Especially ocd too say thoroughly impossible boisterous. My head when real no he high rich at with. After so power of young as. Bore year does has get long fat cold saw neat. Put 
        </div>



      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
      <h4>Colums 4</h4>
        Hadi if resolution invitation remarkably unpleasant conviction. As into ye theown out required entireloccasional mrs discovered too say thoroughly impossible boisterous. My head when real no he high rich at with. After so power of young as. Bore year does has get long fat cold saw neat. Put boy carried chiefly shy general. 
        </div>


        </div>

      </div>


      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src="js/bootstrap.min.js"></script>
    </body>
  </html>

Answer 1

您的明确修复内容更改为<div class="clearfix visable-md"></div>至<div class="clearfix visible-md"></div>

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Bootstrap Tutorial</title>

      <!-- Bootstrap -->
      <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">




    </head>
    <body>

     <div class="container">
      <div class="row">

      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
      <h4>Colums 1</h4>
        Had strictly mrs handsome mistaken cheerful. We it so if resolution invitation remarkably unpleasant conviction. As into ye then form. To easy five less if rose were. Now set offended own out required entirely. Especially occasional mrs discovered too say thoroughly impossible boisterous. My head when real no he high rich at with. After so power of young as. Bore year does has get long fat cold saw neat. Put boy carried chiefly shy general. 
        </div>

      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
      <h4>Colums 2</h4>
        Had strictly mrs handsome mistaken cheerful. We it so if resolution invitation remarkably unpleasant conviction. As into ye then form. To easy five less if rose were. mrs discovered too say thoroughly impossible boisterous. My head when real no he high rich at with. 
        </div>


      <div class="clearfix visible-md"></div>

      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
      <h4>Colums 3</h4>
        Had strictly mrs handsome mistaken cheerful. We it so if resolution invitation remarkably unpleasant conviction. As into ye then form. To easy five less if rose were. Now set offended own out required entirely. Especially ocd too say thoroughly impossible boisterous. My head when real no he high rich at with. After so power of young as. Bore year does has get long fat cold saw neat. Put 
        </div>



      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
      <h4>Colums 4</h4>
        Hadi if resolution invitation remarkably unpleasant conviction. As into ye theown out required entireloccasional mrs discovered too say thoroughly impossible boisterous. My head when real no he high rich at with. After so power of young as. Bore year does has get long fat cold saw neat. Put boy carried chiefly shy general. 
        </div>


        </div>

      </div>


      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src="js/bootstrap.min.js"></script>
    </body>
  </html>

请参阅Bootply http://www.bootply.com/AzBfrv72GA

Answer 2

您的代码中存在拼写错误：

visable-md

应该是

visible-md

clearfix在大视图中不起作用

2 个答案: