Бутстрап белая / пустая коробка заменить - PullRequest
Новая
       8

Бутстрап белая / пустая коробка заменить

0 голосов
/ 07 марта 2019

Я новичок в начальной загрузке, пытаюсь улучшить свои навыки, я сделал 5 коробок, как вы можете видеть (две слева и три справа), мои вопросы: почему поле «5» выглядит иначе, чем не так не в той же строке, что и числа 2 и 4, похоже, у него есть margin-left ... но нет, второй вопрос: когда я использую 'col-xs-12', я хочу, чтобы эти поля были посередине, как 'center', третий вопрос: когда я переключаю свой телефон на 'landscape', эти ящики должны быть (в тех же местах) точно такими же, как он сейчас работает на больших размерах '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 голосов
/ 08 марта 2019 

<!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.Я правильно структурировал.Дайте мне знать, если это то, что вам нужно или вам нужны дальнейшие изменения / объяснения.

0 голосов
/ 07 марта 2019

Есть проблемы, связанные со структурой 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>
...