Bootstrap：仅将 div 用作 xs 屏幕的模式？

Posted 2023-03-06

【中文标题】Bootstrap：仅将 div 用作 xs 屏幕的模式？

【英文标题】：Bootstrap: Use div as modal only for xs screens?

【发布时间】：2017-04-17 19:05:50

【问题描述】：

我在小屏幕及以上屏幕上有两列 Bootstrap 布局。对于 extra small 尺寸类，我想从正常流程中隐藏第二列，将其用作模态的内容。

这是否可能以一种优雅的方式（即不使用 javascript 在 DOM 中移动）？

例子：

<div class="row">
    <!-- Main Column -->
    <div class="col-sm-8 col-md-9">
        Main contents blah blah blah
    </div>
    <!-- Secondary Column -->
    <div class="col-sm-4 col-md-3">
        Other contents. These appear normally in sm, md, lg. In xs, it should be the contents of a modal.
    </div>
</div>

示例模式（应在其中显示辅助列）：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        This is where I want the contents from the secondary column
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

【参考方案1】：

在 Bootstrap 中使用 hidden- 属性。

Hidden-xs - 隐藏在特小中 Hidden-sm - 隐藏在小中 Hidden-md - 隐藏在特小中 等等..

查看Responsive utilities

【讨论】：

这解决了第一部分，但是我如何将它用作模态的内容？

你能详细说明一下吗

在问题中添加了一些示例代码。基本上：我怎样才能使列函数正常>=小，但在超小时成为模态的内容？

【参考方案2】：

是的，您可以通过使用 jQuery 的 $.html() 函数来获取列的 html，然后再次使用 $.html() 将其放置在模态中来做到这一点。这一点，再加上阿卜杜拉的建议，应该会给你你想要的。这是我创建的演示：

$("#myModalBtn").click(function() 
	$("#myModal .modal-body").html($("#myModalContent").html());
	$("#myModal").modal("show");
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
	<div class="row">
	   <!-- Main Column -->
	   <div class="col-sm-8 col-md-9">
		   Main contents blah blah blah
		   
		   <button type="button" class="btn btn-primary visible-xs" id="myModalBtn">Launch demo modal</button>

	   </div>
	   <!-- Secondary Column -->
	   <div class="col-sm-4 col-md-3 hidden-xs" id="myModalContent">
		   Other contents. These appear normally in sm, md, lg. In xs, it should be the contents of a modal.
	   </div>
	</div>  
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">Modal title</h4>
			</div>
			<div class="modal-body">
				This is where I want the contents from the secondary column
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>

点击运行代码片段，然后点击“整页”链接查看它的运行情况。