引导白色/空白框替换

时间:2019-03-07 14:18:12

标签: css html5 twitter-bootstrap twitter-bootstrap-3 bootstrap-4

我是新手,正在尝试提高自己的技能,如您所见,我已经制作了5个框(左侧有2个框,右侧有3个框),我的问题是为什么框号“ 5”看起来不同,所以没有与数字2和4不在同一行上,它看起来好像有左边空白...但是没有,第二个问题是,当我使用“ col-xs-12”时,我希望这些盒子位于中间“中心”,第三个问题是,当我将手机更改为“横向”时,这些盒子应该在相同的地方(就像在大尺寸的“ col-lg-6 col-md-6 col-sm-6”上一样) ,第四个问题是,我有一个框“空白”,是否可以将其替换为“显示:无;或可见性:隐藏;'还能工作吗? 抱歉,英语不是我的母语。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  <style>
  .box{
  width:100px;
  height:100px;
  border: solid black 1px;
  }
   .boxx{
  width:100px;
  height:100px;
  border: solid white 1px;
  }
  * {
    box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-sizing -moz-box-sizing: border-box;
}
    </style>
</head>

<body>
<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="boxx">
            white space 
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="box">
            2
        </div>
    </div>
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="box">
            3
        </div>
    </div>
	  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="box">
            4
        </div>
		  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="box">
            5
        </div>
    </div>
    </div>
    </div>
</div>


   
</body>
</html>

2 个答案:

答案 0 :(得分:0)

存在与DIV结构相关的问题。请检查以下更新的代码。希望这会有所帮助

#include <stdio.h>
#include <string.h>
#include <stdlib.h>

#define maxn 300

int main(){
    FILE *fin, *fout;
    fin = fopen("splitwords.inp", "r");
    fout = fopen("splitwords.txt", "w");
    char buffer[maxn], word[maxn], ch, d;
    int i, pos = 0;

    while((ch = fgetc(fin)) != EOF && ch != '#'){
        while(ch != ' ' && ch != '\t' && ch != '\0'){
            word[pos] = ch;
            pos++;
            if((d = fgetc(fin)) == ' ' || d == '\t' || d == '\0'){
                word[pos] = '\0';
                fputs(word, fout);
                printf("%s", word);
                pos = 0;
            }
        }
        if(ch == ' ' || ch == '\t' || ch == '\0') continue;
    }

    fclose(fin);
    fclose(fout);
}
.box{
  width:100px;
  height:100px;
  border: solid black 1px;
  }
   .boxx{
  width:100px;
  height:100px;
  border: solid white 1px;
  }
  * {
    box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-sizing -moz-box-sizing: border-box;
}

答案 1 :(得分:0)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  <style>
  .box{
  width:100px;
  height:100px;
  border: solid black 1px;
  margin-left: auto;
  margin-right: auto;
  }
   .boxx{
  width:100px;
  height:100px;
  border: solid white 1px;
  margin-left: auto;
  margin-right: auto;
  }
  * {
    box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-sizing -moz-box-sizing: border-box;
}
    </style>
</head>

<body>
<div class="row">
    <div class="col-sm-6">
        <div class="boxx">
            white space 
        </div>
    </div>
    <div class="col-sm-6">
        <div class="box">
            2
        </div>
    </div>
     <div class="col-sm-6">
        <div class="box">
            3
        </div>
    </div>
	  <div class="col-sm-6">
        <div class="box">
            4
        </div>
    </div>
    <div class="col-sm-6 col-sm-offset-6">
      <div class="box">
          5
      </div>
    </div>
</div>
   
</body>
</html>

您好,您遇到的问题归因于div结构和不正确的grid布局。我已经正确构造了它。让我知道这是您所需要的还是需要进一步的更改/说明。