Question

实际上，我的网页上有2个 div 标签，这些标签使用 col-md 值垂直分隔。类似于<div class="col-md-6">和<div class="col-md-6">。现在，两个div并排对齐。。

但是当我最小化浏览器窗口时，两个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>

我的问题，有人可以建议我如何保留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>

即使最小化浏览器后，如何保持html元素的位置？

2 个答案: