Как сохранить положение html-элементов даже после свертывания браузера?

Question

На самом деле, моя веб-страница имеет 2 div теги, которые разделены по вертикали с использованием значений col-md .Это как <div class="col-md-6"> и <div class="col-md-6">.Прямо сейчас оба div выровнены бок о бок..

Но когда я сверну окно браузера, то оба элемента будут выровнены по одному.

Фрагмент кода здесь:

<div class="container">
  <div class="row">
    <div class="col-md-6"> 
        <div class="panel panel-info">
			<div class="panel-heading text-center">
				<div class="panel-title"><strong>Virtual Document 1</strong></div>
			</div>
        </div>

        <div class="panel-body" style="max-height: 10; ">
          <ay-treeTable [value]="node1" selectionMode="multiple" (onNodeSelect) = "selectedLeftNode($event)">
              <ay-column field="name" header="Name" ></ay-column>
              <ay-column field="id" header="Id" [style]="{'width': '130px'}" ></ay-column>
              <ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
          </ay-treeTable>
        </div>
    </div>
	<div class="col-md-6"> 
        <div class="panel panel-info">
          <div class="panel-heading text-center">
            <div class="panel-title " ><strong>Virtual Document 2</strong></div>
          </div>
        </div>
        <div class="panel-body" style="max-height: 10; ">
          <ay-treeTable [value]="node2" selectionMode="multiple" (onNodeSelect) = "selectedRightNode($event)" >
              <ay-column field="name" header="Name"></ay-column>
              <ay-column field="id" header="Id" [style]="{'width': '130px'}"></ay-column>
              <ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
          </ay-treeTable>
        </div>
    </div>
  </div>
</div>

Мой вопрос, кто-нибудь может мне подсказать, как сохранить положение дивов?

Answer 1

Это ваш код с изменением «col-md-6» на «col-6».Я только что связал последнюю загрузочную версию CSS и ее идеальную работу (бок о бок).Надеюсь, это поможет вам.

.col-6{
  border: solid 1px red;
}

<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-6"> 
        <div class="panel panel-info">
			<div class="panel-heading text-center">
				<div class="panel-title"><strong>Virtual Document 1</strong></div>
			</div>
        </div>

        <div class="panel-body" style="max-height: 10; ">
          <ay-treeTable [value]="node1" selectionMode="multiple" (onNodeSelect) = "selectedLeftNode($event)">
              <ay-column field="name" header="Name" ></ay-column>
              <ay-column field="id" header="Id" [style]="{'width': '130px'}" ></ay-column>
              <ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
          </ay-treeTable>
        </div>
    </div>
	<div class="col-6"> 
        <div class="panel panel-info">
          <div class="panel-heading text-center">
            <div class="panel-title " ><strong>Virtual Document 2</strong></div>
          </div>
        </div>
        <div class="panel-body" style="max-height: 10; ">
          <ay-treeTable [value]="node2" selectionMode="multiple" (onNodeSelect) = "selectedRightNode($event)" >
              <ay-column field="name" header="Name"></ay-column>
              <ay-column field="id" header="Id" [style]="{'width': '130px'}"></ay-column>
              <ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
          </ay-treeTable>
        </div>
    </div>
  </div>
</div>

Answer 2

попробуйте, это будет работать

<div class="row">
    <div class="col col-6"> 
      //first content
    </div>
    <div class="col col-6">
      //second content
   </div>
 </div>

для получения более подробной информации об этом документе, как предложено @tico.

Редактировать

Даже еслиэто не очень хорошая идея, но вы сказали, что верхний не работает в вашем случае. Я знаю, что это не внушаемо, но попробуйте один раз

 <div class="row">
        <div class="col-sm-6 col-md-6 col-lg-6"> 
          //first content
        </div>
        <div class="col-sm-6 col-md-6 col-lg-6">
          //second content
       </div>
     </div>