Question

我在小屏幕上有一个两列Bootstrap布局。对于超小尺寸类，我想隐藏正常流程中的第二列，而则将其用作模态的内容。

这是否可以以优雅的方式实现（即不使用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>

Answer 1

是的，您可以使用jQuery的$.html()函数来获取列的html，然后再次使用$.html()将其放入模式中。这与阿卜杜拉的推荐相结合，应该能满足你的需求。这是我创建的一个演示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

点击运行代码段，然后点击＆＃34;整页＆＃34;链接以查看它的实际效果。

Bootstrap：仅对xs屏幕使用div作为模态？

1 个答案: