我想连续列出3列我已添加bootstrap for responsive.but我只显示单行中的一列。我的代码中我做错了。我添加了row.I创建了我想要的轮播显示3列。但它只显示一列
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="suggested_content" class="row">
<div class="view view-suggested-content view-id-suggested_content view-display-id-block suggested-content view-dom-id-1fc7487dcb5039856b57c03c2939611b col-md-12">
<h2>Suggested Content</h2>
<!-- col-md-1 col-sm-1-->
<div class="view-content carousel slide" id="myCarousel">
<div id="previous_arrow" class=""><span><img src="/test/sites/default/files/arrow-prev.png"></span></div>
<div id="views-bootstrap-grid-1" class="views-bootstrap-grid-plugin-style carousel-inner">
<div class="item active">
<div class="responsive-grid-1 col-lg-4 col-xs-4 col-md-4 col-sm-4">
<div class="suggestedContent">
<div class="field-content"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/inner_perspective/public/_MG_7359_5.JPG?itok=3ublCCMm" width="320" height="220" alt=""></div> <div class="perspective-title">Blog</div>
<div class="sug-ontent">
<div class="suggested-title"><span class="field-content">test content 2</span></div>
<div class="suggested-url">
<a href="http://localhost/casestudies/A%20Manpower%20Firm%20engages%20with%20Aspire%20to%20Align%20their%20Business%20Process%20with%20Oracle%20Cloud%20Solutions.pdf" target="_blank">Know More</a>
</div>
</div>
</div>
</div>
</div>
<div class="item ">
<div class="responsive-grid-2 col-lg-4 col-xs-4 col-md-4 col-sm-4">
<div class="suggestedContent">
<div class="field-content"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/inner_perspective/public/_MG_7277_2.JPG?itok=g-BQKDH3" width="320" height="220" alt=""></div> <div class="perspective-title">Blog</div>
<div class="sug-ontent">
<div class="suggested-title"><span class="field-content">test content 1</span></div>
<div class="suggested-url">
<a href="http://localhost/casestudies/A%20Manpower%20Firm%20engages%20with%20Aspire%20to%20Align%20their%20Business%20Process%20with%20Oracle%20Cloud%20Solutions.pdf" target="_blank">Know More</a>
</div>
</div>
</div>
</div>
</div>
<div class="item ">
<div class="responsive-grid-3 col-lg-4 col-xs-4 col-md-4 col-sm-4">
<div class="suggestedContent">
<div class="field-content"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/inner_perspective/public/Manpower%20Firm.jpg?itok=_bYBf1j1" width="320" height="220" alt=""></div> <div class="perspective-title">Case Study</div>
<div class="sug-ontent">
<div class="suggested-title"><span class="field-content">A Manpower Firm engages with Aspire to Align their Business Process with Oracle...</span></div>
<div class="suggested-url">
<a href="http://localhost/casestudies/A%20Manpower%20Firm%20engages%20with%20Aspire%20to%20Align%20their%20Business%20Process%20with%20Oracle%20Cloud%20Solutions.pdf" target="_blank">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="item ">
<div class="responsive-grid-4 col-sm-4 col-md-4 col-lg-4">
<div class="suggestedContent">
<div class="field-content"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/inner_perspective/public/Manpower%20Firm.jpg?itok=_bYBf1j1" width="320" height="220" alt=""></div> <div class="perspective-title">Case Study</div>
<div class="sug-ontent">
<div class="suggested-title"><span class="field-content">A Manpower Firm engages with Aspire to Align their Business Process with Oracle...</span></div>
<div class="suggested-url">
<a href="http://localhost/casestudies/A%20Manpower%20Firm%20engages%20with%20Aspire%20to%20Align%20their%20Business%20Process%20with%20Oracle%20Cloud%20Solutions.pdf" target="_blank">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="responsive-grid-5 col-sm-4 col-md-4 col-lg-4">
<div class="suggestedContent">
<div class="field-content"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/inner_perspective/public/Seasonal%20Merchandise.jpg?itok=nBDMdUIz" width="320" height="220" alt=""></div> <div class="perspective-title">Article</div>
<div class="sug-ontent">
<div class="suggested-title"><span class="field-content">Seasonal Merchandise Planning to focus on Customer Centricity and Inventory...</span></div>
<div class="suggested-url">
<a href="http://localhost/articles/customer-centricity-merchandise-planning-and-inventory-optimization/" target="_blank">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="next_arrow" class=""><span><img src="/test/sites/default/files/arrow-next.png"></span></div> <!-- col-md-1 col-sm-1-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div></div>
</div>
答案 0 :(得分：1)
您必须使用col-xs-12类在一行中显示单个column。
所以我编辑了你code。
如果您关注我的代码，您将在one行中拥有单个元素/列。
HTML：
<div id="suggested_content" class="row">
<div class="view view-suggested-content view-id-suggested_content view-display-id-block suggested-content view-dom-id-1fc7487dcb5039856b57c03c2939611b col-md-12">
<h2>Suggested Content</h2>
<!-- col-md-1 col-sm-1-->
<div class="view-content carousel slide" id="myCarousel">
<div id="previous_arrow" class=""><span><img src="/test/sites/default/files/arrow-prev.png"></span></div>
<div id="views-bootstrap-grid-1" class="views-bootstrap-grid-plugin-style carousel-inner">
<div class="item active">
<div class="responsive-grid-1 col-lg-4 col-xs-12 col-md-4 col-sm-4">
<div class="suggestedContent">
<div class="field-content"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/inner_perspective/public/_MG_7359_5.JPG?itok=3ublCCMm" width="320" height="220" alt=""></div> <div class="perspective-title">Blog</div>
<div class="sug-ontent">
<div class="suggested-title"><span class="field-content">test content 2</span></div>
<div class="suggested-url">
<a href="http://localhost/casestudies/A%20Manpower%20Firm%20engages%20with%20Aspire%20to%20Align%20their%20Business%20Process%20with%20Oracle%20Cloud%20Solutions.pdf" target="_blank">Know More</a>
</div>
</div>
</div>
</div>
</div>
<div class="item ">
<div class="responsive-grid-2 col-lg-4 col-xs-12 col-md-4 col-sm-4">
<div class="suggestedContent">
<div class="field-content"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/inner_perspective/public/_MG_7277_2.JPG?itok=g-BQKDH3" width="320" height="220" alt=""></div> <div class="perspective-title">Blog</div>
<div class="sug-ontent">
<div class="suggested-title"><span class="field-content">test content 1</span></div>
<div class="suggested-url">
<a href="http://localhost/casestudies/A%20Manpower%20Firm%20engages%20with%20Aspire%20to%20Align%20their%20Business%20Process%20with%20Oracle%20Cloud%20Solutions.pdf" target="_blank">Know More</a>
</div>
</div>
</div>
</div>
</div>
<div class="item ">
<div class="responsive-grid-3 col-lg-4 col-xs-12 col-md-4 col-sm-4">
<div class="suggestedContent">
<div class="field-content"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/inner_perspective/public/Manpower%20Firm.jpg?itok=_bYBf1j1" width="320" height="220" alt=""></div> <div class="perspective-title">Case Study</div>
<div class="sug-ontent">
<div class="suggested-title"><span class="field-content">A Manpower Firm engages with Aspire to Align their Business Process with Oracle...</span></div>
<div class="suggested-url">
<a href="http://localhost/casestudies/A%20Manpower%20Firm%20engages%20with%20Aspire%20to%20Align%20their%20Business%20Process%20with%20Oracle%20Cloud%20Solutions.pdf" target="_blank">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="item ">
<div class="responsive-grid-4 col-sm-4 col-xs-12 col-md-4 col-lg-4">
<div class="suggestedContent">
<div class="field-content"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/inner_perspective/public/Manpower%20Firm.jpg?itok=_bYBf1j1" width="320" height="220" alt=""></div> <div class="perspective-title">Case Study</div>
<div class="sug-ontent">
<div class="suggested-title"><span class="field-content">A Manpower Firm engages with Aspire to Align their Business Process with Oracle...</span></div>
<div class="suggested-url">
<a href="http://localhost/casestudies/A%20Manpower%20Firm%20engages%20with%20Aspire%20to%20Align%20their%20Business%20Process%20with%20Oracle%20Cloud%20Solutions.pdf" target="_blank">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="responsive-grid-5 col-sm-4 col-xs-12 col-md-4 col-lg-4">
<div class="suggestedContent">
<div class="field-content"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/inner_perspective/public/Seasonal%20Merchandise.jpg?itok=nBDMdUIz" width="320" height="220" alt=""></div> <div class="perspective-title">Article</div>
<div class="sug-ontent">
<div class="suggested-title"><span class="field-content">Seasonal Merchandise Planning to focus on Customer Centricity and Inventory...</span></div>
<div class="suggested-url">
<a href="http://localhost/articles/customer-centricity-merchandise-planning-and-inventory-optimization/" target="_blank">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="next_arrow" class=""><span><img src="/test/sites/default/files/arrow-next.png"></span></div> <!-- col-md-1 col-sm-1-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
答案 1 :(得分：0)
我在项目中使用了另一个div标签，并在css中添加了column-gap。请注意，这是幻灯片的最小表示。我尝试了引导网格布局但由于某种原因它在转盘内不起作用。但我建议如果网格可以工作，那是最好的选择。
尝试使用代码段
.carousel{
background: grey;
}
#myid {
column-count: 3;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div id="text-carousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="row">
<div class="col-xs-offset-3 col-xs-6">
<div class="carousel-inner">
<div class="item active">
<div class="carousel-content">
<div id=myid>
<p>Sapiente, ducimus, voluptas, mollitia voluptatibus nemo explicabo sit blanditiis laborum dolore illum fuga veniam quae expedita libero accusamus quas harum ex numquam necessitatibus provident deleniti tenetur iusto officiis recusandae corporis culpa quaerat?</p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div id=myid>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, sint fuga temporibus nam saepe delectus expedita vitae magnam necessitatibus dolores tempore consequatur dicta cumque repellendus eligendi ducimus placeat! </p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div id=myid> <img src="https://png.pngtree.com/thumb_back/fw800/back_pic/03/77/45/0657c00b43e2a66.jpg" width="250px" height="20px;">
<p>Sapiente, ducimus, voluptas, mollitia voluptatibus nemo explicabo sit blanditiis laborum dolore illum fuga veniam quae expedita libero accusamus quas harum ex numquam necessitatibus provident deleniti tenetur iusto officiis recusandae corporis culpa quaerat?</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls --> <a class="left carousel-control" href="#text-carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#text-carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</body>