Question

我将屏幕分成两部分。左右两部分。在左边部分应该有一个带有表格元素的手风琴。在右侧，我选择，选择或输入表格的实况内容。

问题在于，当我使视口更宽时，我无法理解为什么我的手风琴元素没有在左div的中心对齐。

我试图将左侧<div class="col-md-6">添加到这样的内容中：

<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <div id="accordion">...</div>
    </div
  </div>
</div>

但这不起作用。

Answer 1

您在div中使用了容器类，您需要使用行类。

var col = "default"; //keep the color string
setInterval(function() {
  if (col == "default") { 
    $("#btnTest").css("background-color", "green");
    col = "green";
  } else if (col == "green") {
    $("#btnTest").css("background-color", "yellow");
    col = "yellow";
  } else if (col == "yellow") {
    $("#btnTest").css("background-color", "red");
    col = "red";
  }
}, 2000); // 2 second interval
$("#btnTest").on("click", function() { // on click change color to green
  $("#btnTest").css("background-color", "green");
})

See updated fiddle

Answer 2

您可以使用解决方案https://jsfiddle.net/mja1qqeg/11/

$(document).ready(function() {
    		var icons = {
      			header: "ui-icon-circle-arrow-e",
      			activeHeader: "ui-icon-circle-arrow-s"
    		};

	    	$("#accordion").accordion({
	      			icons: icons
	   		});

	    	$("#toggle").button().on("click", function() {
	      		if ($("#accordion").accordion("option", "icons")) {
	        		$("#accordion").accordion("option", "icons", null);
	      		} 
	      		else {
	        		$("#accordion").accordion("option", "icons", icons);
	      		}
	    	});
  		});

header {
	height: 60px;
	background-color: #cc081e;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header></header>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-6" style="border: 1px solid black">
    	<div class="row">
    		<div class="col-md-8 col-md-offset-2">
    			<div id="accordion">
	    			<h3>1.Section</h3>
	    			<div class="accordion-content">
	    				<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
	    			</div>
	    			<h3>2.Section</h3>
	    			<div class="accordion-content">
	    			  <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
	    			</div>
	    			<h3>3.Section</h3>
	    			<div class="accordion-content">
	    			  <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
	    			</div>	
	    		</div>
    		</div>
    	</div>
    </div>
    <div class="col-md-6" style="border: 1px solid black">
    	<div class="container">
    		<div class="col-md-8 col-md-offset-2">
    			test
    		</div>
    	</div>
    </div>
  </div>
</div>

Answer 3

请查看bootstraps文档。您的问题是您在错误的位置使用容器类。

Bootstrap Docs（网格）：http://getbootstrap.com/css/#grid

只需删除你的容器div，它就像魅力一样。

<div class="col-md-6" style="border: 1px solid black">
  <div class="col-md-8 col-md-offset-2">
    <div id="accordion">
      <h3>1.Section</h3>
...

小提琴：https://jsfiddle.net/mja1qqeg/5/

如何在div中对齐手风琴中心

3 个答案: