我期望的设计是这样的
您在顶部看到的每个 pod 都有相应的内部隐藏内容。在那个加号按钮上单击我将显示它并且显示的内容需要像图像中那样占据全宽。一切正常，除了内部内容(类名 shower)没有对齐全宽。这是我的代码
$(document).ready(function() {
$(".cssCircle").click(function() {
var id = $(this).attr('data-target');
$(id).show();
});
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<div class="container charity-listing">
<ul style="list-style:none;">
<li class="col-md-3 odd" style="width:22% !important ;border: 1px solid #ccc;border-radius: 8px 8px 8px 8px;margin:4px 4px 4px 4px">
<div class="pod">
<img style="position:inherit !important;right:0px !important;width:100%;max-width:100%;height:auto;" src="https://s16.postimg.org/c7m216tvp/images.png">
<strong title="Charity test">Charity test</strong>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
<div class="cssCircle plusSign" data-toggle="modal" data-target="#tabsec0">+</div>
</div>
<div class="col-md-12 shower in" style="display:none" id="tabsec0" aria-hidden="false">
<div class="col-md-4">
<!--WoW Slider End-->
</div>
<div class="col-md-8">
<h3>Charity test</h3>
<p>
<strong>Lorem Ipsum</strong>
<span>is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry.<br />is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry.</span>
</p>
<p>
</p>
</div>
</div>
</li>
<li class="col-md-3 odd" style="width:22% !important ;border: 1px solid #ccc;border-radius: 8px 8px 8px 8px;margin:4px 4px 4px 4px">
<div class="pod">
<img style="position:inherit !important;right:0px !important;width:100%;max-width:100%;height:auto;" src="https://s16.postimg.org/c7m216tvp/images.png">
<strong title="Charity test">Charity test</strong>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
<div class="cssCircle plusSign" data-toggle="modal" data-target="#tabsec0">+</div>
</div>
<div class="col-md-12 shower in" style="display:none" id="tabsec0" aria-hidden="false">
<div class="col-md-4">
<!--WoW Slider End-->
</div>
<div class="col-md-8">
<h3>Charity test</h3>
<p></p>
<p>
<strong>Lorem Ipsum</strong>
<span>is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. <br />is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry.</span>
</p>
<p></p>
</div>
</div>
</li>
<li class="col-md-3 odd" style="width:22% !important ;border: 1px solid #ccc;border-radius: 8px 8px 8px 8px;margin:4px 4px 4px 4px">
<div class="pod">
<img style="position:inherit !important;right:0px !important;width:100%;max-width:100%;height:auto;" src="https://s16.postimg.org/c7m216tvp/images.png">
<strong title="Charity test">
Charity test
</strong>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
</p>
<div class="cssCircle plusSign" data-toggle="modal" data-target="#tabsec0">
+
</div>
</div>
<div class="col-md-12 shower in" style="display:none" id="tabsec0" aria-hidden="false">
<div class="col-md-4">
<!--WoW Slider End-->
</div>
<div class="col-md-8">
<h3>
Charity test
</h3>
<p>
</p>
<p>
<strong>
Lorem Ipsum
</strong>
<span>
is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. <br />
is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry.
</span>
</p>
<p>
</p>
</div>
</div>
</li>
<li class="col-md-3 odd" style="width:22% !important ;border: 1px solid #ccc;border-radius: 8px 8px 8px 8px;margin:4px 4px 4px 4px">
<div class="pod">
<img style="position:inherit !important;right:0px !important;width:100%;max-width:100%;height:auto;" src="https://s16.postimg.org/c7m216tvp/images.png">
<strong title="Charity test">
Charity test
</strong>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
</p>
<div class="cssCircle plusSign" data-toggle="modal" data-target="#tabsec0">
+
</div>
</div>
<div class="col-md-12 shower in" style="display:none" id="tabsec0" aria-hidden="false">
<div class="col-md-4">
<!--WoW Slider End-->
</div>
<div class="col-md-8">
<h3>
Charity test
</h3>
<p>
</p>
<p>
<strong>
Lorem Ipsum
</strong>
<span>
is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. <br />
is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry.
</span>
</p>
<p>
</p>
</div>
</div>
</li>
<li class="col-md-3 odd" style="width:22% !important ;border: 1px solid #ccc;border-radius: 8px 8px 8px 8px;margin:4px 4px 4px 4px">
<div class="pod">
<img style="position:inherit !important;right:0px !important;width:100%;max-width:100%;height:auto;" src="https://s16.postimg.org/c7m216tvp/images.png">
<strong title="Charity test">
Charity test
</strong>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
</p>
<div class="cssCircle plusSign" data-toggle="modal" data-target="#tabsec0">
+
</div>
</div>
<div class="col-md-12 shower in" style="display:none" id="tabsec0" aria-hidden="false">
<div class="col-md-4">
<!--WoW Slider End-->
</div>
<div class="col-md-8">
<h3>
Charity test
</h3>
<p>
</p>
<p>
<strong>
Lorem Ipsum
</strong>
<span>
is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. <br />
is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry.
</span>
</p>
<p>
</p>
</div>
</div>
</li>
</ul>
</div>谁能指出我在这里遗漏了什么？
CodePen version for better understanding http://codepen.io/anon/pen/eBMYVx
最佳答案
你应该删除 col-md-4 和 col-md-8 以获得全宽 看看下面的代码
$(document).ready(function() {
$(".cssCircle").click(function() {
var id = $(this).attr('data-target');
$(id).show();
});
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<div class="container charity-listing">
<ul style="list-style:none;">
<li class="col-md-3 odd" style="width:22% !important ;border: 1px solid #ccc;border-radius: 8px 8px 8px 8px;margin:4px 4px 4px 4px">
<div class="pod">
<img style="position:inherit !important;right:0px !important;width:100%;max-width:100%;height:auto;" src="https://s16.postimg.org/c7m216tvp/images.png">
<strong title="Charity test">
Charity test
</strong>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
</p>
<div class="cssCircle plusSign" data-toggle="modal" data-target="#tabsec0">
+
</div>
</div>
<div class="col-md-12 shower in" style="display:none" id="tabsec0" aria-hidden="false">
<h3>
Charity test
</h3>
ong>
Lorem Ipsum
</strong>
<span>
is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. <br />
is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry.
</span>
</p>
</div>
</li>
<li class="col-md-3 odd" style="width:22% !important ;border: 1px solid #ccc;border-radius: 8px 8px 8px 8px;margin:4px 4px 4px 4px">
<div class="pod">
<img style="position:inherit !important;right:0px !important;width:100%;max-width:100%;height:auto;" src="https://s16.postimg.org/c7m216tvp/images.png">
<strong title="Charity test">
Charity test
</strong>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
</p>
<div class="cssCircle plusSign" data-toggle="modal" data-target="#tabsec0">
+
</div>
</div>
<div class="col-md-12 shower in" style="display:none" id="tabsec0" aria-hidden="false">
<h3>
Charity test
</h3>
<p>
</p>
<p>
<strong>
Lorem Ipsum
</strong>
<span>
is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. <br />
is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry.
</span>
</p>
</div>
</li>
<li class="col-md-3 odd" style="width:22% !important ;border: 1px solid #ccc;border-radius: 8px 8px 8px 8px;margin:4px 4px 4px 4px">
<div class="pod">
<img style="position:inherit !important;right:0px !important;width:100%;max-width:100%;height:auto;" src="https://s16.postimg.org/c7m216tvp/images.png">
<strong title="Charity test">
Charity test
</strong>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
</p>
<div class="cssCircle plusSign" data-toggle="modal" data-target="#tabsec0">
+
</div>
</div>
<div class="col-md-12 shower in" style="display:none" id="tabsec0" aria-hidden="false">
<h3>
Charity test
</h3>
<p>
</p>
<p>
<strong>
Lorem Ipsum
</strong>
<span>
is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. <br />
is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry.
</span>
</p>
<p>
</div>
</li>
<li class="col-md-3 odd" style="width:22% !important ;border: 1px solid #ccc;border-radius: 8px 8px 8px 8px;margin:4px 4px 4px 4px">
<div class="pod">
<img style="position:inherit !important;right:0px !important;width:100%;max-width:100%;height:auto;" src="https://s16.postimg.org/c7m216tvp/images.png">
<strong title="Charity test">
Charity test
</strong>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
</p>
<div class="cssCircle plusSign" data-toggle="modal" data-target="#tabsec0">
+
</div>
</div>
<div class="col-md-12 shower in" style="display:none" id="tabsec0" aria-hidden="false">
<h3>
Charity test
</h3>
<p>
</p>
<p>
<strong>
Lorem Ipsum
</strong>
<span>
is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. <br />
is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry.
</span>
</p>
</div>
</li>
<li class="col-md-3 odd" style="width:22% !important ;border: 1px solid #ccc;border-radius: 8px 8px 8px 8px;margin:4px 4px 4px 4px">
<div class="pod">
<img style="position:inherit !important;right:0px !important;width:100%;max-width:100%;height:auto;" src="https://s16.postimg.org/c7m216tvp/images.png">
<strong title="Charity test">
Charity test
</strong>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
</p>
<div class="cssCircle plusSign" data-toggle="modal" data-target="#tabsec0">
+
</div>
</div>
<div class="col-md-12 shower in" style="display:none" id="tabsec0" aria-hidden="false">
<h3>
Charity test
</h3>
<p>
</p>
<p>
<strong>
Lorem Ipsum
</strong>
<span>
is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry. <br />
is simply dummy text of the printing and typesetting industry. is simply dummy text of the printing and typesetting industry.
</span>
</p>
</div>
</li>
</ul>
</div>关于html - 在 Col-md-3 中显示全宽列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40968052/