Question

如何在没有大空间的情况下正确显示网格，看起来不错？

我的代码：

<?php
    if ($rows['plus'] < $Stime OR $rows['plus'] == 0) {
        $saveal = mysql_query("UPDATE `".TB_PREFIX."users` SET plus = 0 WHERE id = \"".$userid."\"");
        echo "<b>غير مفعّل</b> ";
        $activ = array('يوم','يومان','3 أيام','4 أيام','5 أيام','6 أيام','7 أيام');
?> 
    <script language="javascript">
        function updateplus(){
            var d = document.getElementById("select_day").selectedindex;
            if (d == 0){
                var vla = 1;
            }else if (d == 1) {
                var val =2;
            }else{
                alert("please select value");
            }

        }
    </script>
    <select name="select_day" id="select_day" onchange="updateplus()">
  <?php
    foreach($activ as $key => $value):
        echo '<option value="'.$key.'">'.$value.'</option>'; //close your tags!!
    endforeach;
    //$saveal2 = mysql_query("UPDATE `".TB_PREFIX."users` SET plus = \"".$s."\" WHERE id = \"".$userid."\"");
    ?>
  </select>

也许我应该使用任何JS脚本或smthing？请帮助：）

Answer 1

您需要在您使用（992px for col）的断点处清除添加到列中的float（默认情况下列float: left） -md - *）或当您总共有12列时，将列放在单独的行中。

<div classs=container>
  <div classs=row>
    <div classs=col-*-6>
    <div classs=col-*-6>
  <div><!-- EQUALS 12 COLUMNS -->
  <div classs=row>
    <div classs=col-*-6>
    <div classs=col-*-3>
    <div classs=col-*-3>
  <div><!-- EQUALS 12 COLUMNS -->
<div>

使用行的示例

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <div class="row">
    <div class="col-md-6">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>
  </div>

  <div class="row">
    <div class="col-md-6">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>
  </div>

  <div class="row">
    <div class="col-md-6">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>
  </div>

</div>

＆＃13;

示例自行清除Float @ 992px，同时仅为所有列使用单行。注意：确保以某种方式指定这些列，这样就不会在其他地方干扰网格的另一部分;使用通用.item类来处理此问题的示例，但可以通过多种方式完成。

有关详细信息，请参阅MDN上的nth-child和clear。

＆＃13;

@media (min-width: 992px) {
  .item:nth-child(3n+1) {
    clear: left;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">

    <div class="col-md-6 item">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>

    <div class="col-md-6 item">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>

    <div class="col-md-6 item">
      <img src="http://placehold.it/500x250/000" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/f00" class="img-responsive" />
    </div>

    <div class="col-md-3 item">
      <img src="http://placehold.it/250x250/ff0" class="img-responsive" />
    </div>

  </div>
</div>

＆＃13;

Bootstrap网格无法正确显示

1 个答案: