Bootstrap白色/空白框替换

问题描述 投票：0回答：2

我是新手，试图提高我的技能，我已经制作了5个盒子，你可以看到（两个在左侧和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>
css html5 twitter-bootstrap twitter-bootstrap-3 bootstrap-4
2个回答
0
投票

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

.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;
}
<!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>
</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>
	  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <div class="box">
          5
      </div>
    </div>
    </div>
</div>


   
</body>
</html>
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布局。我已经正确地构建了它。如果这是您需要的或需要进一步更改/解释，请告诉我。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.