无法找到任何文档，看看是否有人已经这样做了。我想通过javascript或PHP可以实现。我将解释我想要完成的事情：
假设我使用Twitter Bootstrap 4。
说我在HTML中有以下内容：
<div class="row">
<div class="col-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum posuere porta. Sed vitae dictum odio. Quisque nec rhoncus justo. Sed tempus pharetra convallis. Nunc rhoncus nibh nisi, eget lobortis nisl efficitur eget. Fusce nec tincidunt felis, id tempor arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quis feugiat diam. Morbi diam nisl, iaculis in elit eget, venenatis consectetur augue.
<p>Morbi aliquam, nisl pretium rhoncus interdum, tellus arcu lacinia purus, quis facilisis massa erat a sapien. Phasellus mollis accumsan erat vel pharetra. Nulla semper cursus neque, nec pretium quam porta id. Duis pretium non diam sit amet rhoncus. Quisque dictum urna sed magna pretium, eget tincidunt ligula condimentum. Sed id risus vitae lectus condimentum eleifend ut eget nisi. Nunc euismod, arcu et pharetra rhoncus, diam dui lobortis ex, a scelerisque leo ligula porttitor velit. Duis ultricies risus urna, quis interdum tellus lobortis sit amet. Morbi risus nibh, dignissim nec tincidunt id, pellentesque id nunc. Ut ultrices quam at lorem feugiat, eget laoreet sem auctor. In augue dolor, porta eget nulla sed, mattis euismod urna. Nullam vel sapien tellus. Vivamus et arcu at leo aliquam tempus vitae vel leo. Donec imperdiet lectus a diam aliquam, vitae ultricies dui vulputate. Nulla id urna enim. Quisque varius neque vitae egestas hendrerit.
<p>Duis vitae imperdiet quam. Vestibulum congue finibus velit nec sagittis. Integer vel ex nulla. Nunc in urna dignissim, ullamcorper enim in, lobortis ligula. Vivamus tellus ligula, feugiat at diam ac, luctus vestibulum tortor. Cras congue magna vitae orci posuere volutpat. Duis eu eros rhoncus ligula auctor elementum. Fusce vulputate ante ut luctus fermentum. Sed ultricies, est eu lacinia rutrum, nibh purus dictum arcu, sit amet scelerisque tortor leo vel ligula. Praesent sem leo, volutpat sed erat vitae, consectetur maximus nibh. Ut at facilisis tellus. Sed urna ipsum, congue rhoncus turpis eget, semper commodo libero. Aliquam metus tellus, facilisis ut posuere vel, lacinia id ex.
<p>Cras quis eros eleifend lorem tempus sodales. Sed semper sagittis aliquam. Integer a bibendum elit. Nunc dignissim vel elit id sodales. Phasellus non lorem dolor. Ut viverra diam sed lacus tincidunt, vel lobortis sapien sodales. Praesent ante mi, iaculis sed erat vel, ultricies eleifend eros. Donec a libero vestibulum, dictum orci quis, scelerisque orci. Maecenas volutpat ex eu ex fermentum interdum.
<p>Cras ut elit risus. Sed semper mi mauris, vel bibendum augue pharetra efficitur. Vestibulum finibus elit sit amet velit blandit convallis et dignissim nisi. Etiam nec quam odio. Sed eget accumsan ante. Mauris cursus nibh a consectetur ornare. Proin molestie purus sit amet lacinia hendrerit. Sed in elit mauris. Donec pretium sapien libero. Aliquam sed tempus lorem. Cras maximus eu urna vitae ultricies. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque purus lorem, condimentum at eros vitae, sagittis vestibulum elit. Sed placerat sapien urna, eget suscipit massa pharetra in. Nulla efficitur ac ipsum non varius.
<p>Donec quis consequat leo, in aliquet neque. Integer gravida faucibus diam id eleifend. Aenean at dolor nec ante aliquet consectetur. Nullam ullamcorper neque facilisis, faucibus nisl nec, volutpat elit. Fusce facilisis quis nisl sed lobortis. Suspendisse purus tellus, vulputate a tortor eu, pellentesque bibendum odio. Fusce nisl nisl, maximus non hendrerit non, accumsan eu nunc. Vivamus ex tortor, vulputate et tortor et, pellentesque lobortis orci.</p>
</div>
</div>
但是，当屏幕大于＆gt; 768px时，我想自动将上面的内容分成两半并显示为。
<div class="row">
<div class="col-md-6">
<!-- Half the content -->
</div>
<div class="col-md-6">
<!-- Second half of content -->
</div>
</div>
至于内容：
还必须保留一些规则。
可以做到，实现它的最佳方法是什么？
关于我个人的偏好，如果我能用PHP实现这一点，那将是最理想的，第二选择是jQuery。
答案 0 :(得分：3)
我认为如果您希望它具有响应能力，那么在CSS多列上使用column-width是可行的方法。
.row {
column-width: 400px;
column-gap: 10px;
}
p {
padding: 10px;
width: 100%;
}
演示：https://www.codeply.com/go/UvsUTQDVcC
编辑 - 避免破坏段落的唯一方法是使用break-inside: avoid;，但随后它会降低偶数高度。
p {
padding: 10px;
width: 100%;
break-inside: avoid;
}
或者，可以使用column-count:..，然后为每个断点/宽度定义@media查询。
答案 1 :(得分：1)
这比制作它简单得多。
您可以在屏幕大小更改时包含多个col类。只需为每个屏幕大小包含一个屏幕，引导程序将处理其余屏幕。
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<p class="col-lg-12 col-md-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum posuere porta. Sed vitae dictum odio. Quisque nec rhoncus justo. Sed tempus pharetra convallis. Nunc rhoncus nibh nisi, eget lobortis nisl efficitur eget. Fusce nec tincidunt felis,
id tempor arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quis feugiat diam. Morbi diam nisl, iaculis in elit eget, venenatis consectetur augue.
</p>
<p class="col-lg-12 col-md-6">Morbi aliquam, nisl pretium rhoncus interdum, tellus arcu lacinia purus, quis facilisis massa erat a sapien. Phasellus mollis accumsan erat vel pharetra. Nulla semper cursus neque, nec pretium quam porta id. Duis pretium non diam sit amet rhoncus. Quisque
dictum urna sed magna pretium, eget tincidunt ligula condimentum. Sed id risus vitae lectus condimentum eleifend ut eget nisi. Nunc euismod, arcu et pharetra rhoncus, diam dui lobortis ex, a scelerisque leo ligula porttitor velit. Duis ultricies risus
urna, quis interdum tellus lobortis sit amet. Morbi risus nibh, dignissim nec tincidunt id, pellentesque id nunc. Ut ultrices quam at lorem feugiat, eget laoreet sem auctor. In augue dolor, porta eget nulla sed, mattis euismod urna. Nullam vel sapien
tellus. Vivamus et arcu at leo aliquam tempus vitae vel leo. Donec imperdiet lectus a diam aliquam, vitae ultricies dui vulputate. Nulla id urna enim. Quisque varius neque vitae egestas hendrerit.
</p>
<p class="col-lg-12 col-md-6">Duis vitae imperdiet quam. Vestibulum congue finibus velit nec sagittis. Integer vel ex nulla. Nunc in urna dignissim, ullamcorper enim in, lobortis ligula. Vivamus tellus ligula, feugiat at diam ac, luctus vestibulum tortor. Cras congue magna vitae
orci posuere volutpat. Duis eu eros rhoncus ligula auctor elementum. Fusce vulputate ante ut luctus fermentum. Sed ultricies, est eu lacinia rutrum, nibh purus dictum arcu, sit amet scelerisque tortor leo vel ligula. Praesent sem leo, volutpat sed
erat vitae, consectetur maximus nibh. Ut at facilisis tellus. Sed urna ipsum, congue rhoncus turpis eget, semper commodo libero. Aliquam metus tellus, facilisis ut posuere vel, lacinia id ex.
</p>
<p class="col-lg-12 col-md-6">Cras quis eros eleifend lorem tempus sodales. Sed semper sagittis aliquam. Integer a bibendum elit. Nunc dignissim vel elit id sodales. Phasellus non lorem dolor. Ut viverra diam sed lacus tincidunt, vel lobortis sapien sodales. Praesent ante mi, iaculis
sed erat vel, ultricies eleifend eros. Donec a libero vestibulum, dictum orci quis, scelerisque orci. Maecenas volutpat ex eu ex fermentum interdum.
</p>
<p class="col-lg-12 col-md-6">Cras ut elit risus. Sed semper mi mauris, vel bibendum augue pharetra efficitur. Vestibulum finibus elit sit amet velit blandit convallis et dignissim nisi. Etiam nec quam odio. Sed eget accumsan ante. Mauris cursus nibh a consectetur ornare. Proin
molestie purus sit amet lacinia hendrerit. Sed in elit mauris. Donec pretium sapien libero. Aliquam sed tempus lorem. Cras maximus eu urna vitae ultricies. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque
purus lorem, condimentum at eros vitae, sagittis vestibulum elit. Sed placerat sapien urna, eget suscipit massa pharetra in. Nulla efficitur ac ipsum non varius.
</p>
<p class="col-lg-12 col-md-6">Donec quis consequat leo, in aliquet neque. Integer gravida faucibus diam id eleifend. Aenean at dolor nec ante aliquet consectetur. Nullam ullamcorper neque facilisis, faucibus nisl nec, volutpat elit. Fusce facilisis quis nisl sed lobortis. Suspendisse
purus tellus, vulputate a tortor eu, pellentesque bibendum odio. Fusce nisl nisl, maximus non hendrerit non, accumsan eu nunc. Vivamus ex tortor, vulputate et tortor et, pellentesque lobortis orci.</p>
</div>
</div>
答案 2 :(得分：1)
你可以使用，比如，数学或某些东西。
$(()=>{
$(".splitme").each(function(){
var lens = [];
$(this).find("p").each(function(){lens.push($(this).text().length)});
var target_col_len = lens.reduce((a,i)=>a+i,0)/2;
var col_a = [], col_b = [], n = 0;
for(var i=0; i<lens.length; i++){
if(n+lens[i]<=target_col_len || Math.abs(n+lens[i]-target_col_len)<Math.abs(n-target_col_len)) col_a.push(i);
else col_b.push(i);
n+=lens[i];
}
var $c = $(this).clone();
var $col_a = $('<div class="col-6">'), $col_b = $('<div class="col-6">');
for(var i=0; i<col_a.length; i++) $col_a.append($c.find("p:eq("+i+")"));
for(var i=0; i<col_b.length; i++) $col_b.append($c.find("p:eq("+i+")"));
$(this).parent().empty().append($col_a).append($col_b);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-12 splitme">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum posuere porta. Sed vitae dictum odio. Quisque nec rhoncus justo. Sed tempus pharetra convallis. Nunc rhoncus nibh nisi, eget lobortis nisl efficitur eget. Fusce nec tincidunt felis, id tempor arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quis feugiat diam. Morbi diam nisl, iaculis in elit eget, venenatis consectetur augue.
<p>Morbi aliquam, nisl pretium rhoncus interdum, tellus arcu lacinia purus, quis facilisis massa erat a sapien. Phasellus mollis accumsan erat vel pharetra. Nulla semper cursus neque, nec pretium quam porta id. Duis pretium non diam sit amet rhoncus. Quisque dictum urna sed magna pretium, eget tincidunt ligula condimentum. Sed id risus vitae lectus condimentum eleifend ut eget nisi. Nunc euismod, arcu et pharetra rhoncus, diam dui lobortis ex, a scelerisque leo ligula porttitor velit. Duis ultricies risus urna, quis interdum tellus lobortis sit amet. Morbi risus nibh, dignissim nec tincidunt id, pellentesque id nunc. Ut ultrices quam at lorem feugiat, eget laoreet sem auctor. In augue dolor, porta eget nulla sed, mattis euismod urna. Nullam vel sapien tellus. Vivamus et arcu at leo aliquam tempus vitae vel leo. Donec imperdiet lectus a diam aliquam, vitae ultricies dui vulputate. Nulla id urna enim. Quisque varius neque vitae egestas hendrerit.
<p>Duis vitae imperdiet quam. Vestibulum congue finibus velit nec sagittis. Integer vel ex nulla. Nunc in urna dignissim, ullamcorper enim in, lobortis ligula. Vivamus tellus ligula, feugiat at diam ac, luctus vestibulum tortor. Cras congue magna vitae orci posuere volutpat. Duis eu eros rhoncus ligula auctor elementum. Fusce vulputate ante ut luctus fermentum. Sed ultricies, est eu lacinia rutrum, nibh purus dictum arcu, sit amet scelerisque tortor leo vel ligula. Praesent sem leo, volutpat sed erat vitae, consectetur maximus nibh. Ut at facilisis tellus. Sed urna ipsum, congue rhoncus turpis eget, semper commodo libero. Aliquam metus tellus, facilisis ut posuere vel, lacinia id ex.
<p>Cras quis eros eleifend lorem tempus sodales. Sed semper sagittis aliquam. Integer a bibendum elit. Nunc dignissim vel elit id sodales. Phasellus non lorem dolor. Ut viverra diam sed lacus tincidunt, vel lobortis sapien sodales. Praesent ante mi, iaculis sed erat vel, ultricies eleifend eros. Donec a libero vestibulum, dictum orci quis, scelerisque orci. Maecenas volutpat ex eu ex fermentum interdum.
<p>Cras ut elit risus. Sed semper mi mauris, vel bibendum augue pharetra efficitur. Vestibulum finibus elit sit amet velit blandit convallis et dignissim nisi. Etiam nec quam odio. Sed eget accumsan ante. Mauris cursus nibh a consectetur ornare. Proin molestie purus sit amet lacinia hendrerit. Sed in elit mauris. Donec pretium sapien libero. Aliquam sed tempus lorem. Cras maximus eu urna vitae ultricies. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque purus lorem, condimentum at eros vitae, sagittis vestibulum elit. Sed placerat sapien urna, eget suscipit massa pharetra in. Nulla efficitur ac ipsum non varius.
<p>Donec quis consequat leo, in aliquet neque. Integer gravida faucibus diam id eleifend. Aenean at dolor nec ante aliquet consectetur. Nullam ullamcorper neque facilisis, faucibus nisl nec, volutpat elit. Fusce facilisis quis nisl sed lobortis. Suspendisse purus tellus, vulputate a tortor eu, pellentesque bibendum odio. Fusce nisl nisl, maximus non hendrerit non, accumsan eu nunc. Vivamus ex tortor, vulputate et tortor et, pellentesque lobortis orci.</p>
</div>
</div>
编辑.. 另一个人的回答不那么愚蠢......我在恭维他，你也应该......
答案 3 :(得分：1)
我对引导程序的理解很明显地告诉我，class="col-lg-12 col-md-6"会使包含12个网格单元格的段的宽度大于＆＃34;大＆＃34;屏幕宽度，以及＃34;中等＃34;屏幕宽度 - 但它不会影响每个段落的列数...整个div只会更窄。
在该div中，除了bootstrap之外，您可以使用columns或column-count属性使用纯CSS执行多个列，如下所示：
div.row .multicol {
column-count: 2;
}<div class="row">
<div class="col-12 multicol">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce bibendum posuere porta. Sed vitae dictum odio. Quisque
nec rhoncus justo. Sed tempus pharetra convallis. Nunc rhoncus
nibh nisi, eget lobortis nisl efficitur eget. Fusce nec
tincidunt felis, id tempor arcu. Interdum et malesuada fames
ac ante ipsum primis in faucibus. Donec quis feugiat diam.
Morbi diam nisl, iaculis in elit eget, venenatis consectetur
augue.</p>
<p>Morbi aliquam, nisl pretium rhoncus interdum, tellus arcu
lacinia purus, quis facilisis massa erat a sapien. Phasellus
mollis accumsan erat vel pharetra. Nulla semper cursus neque,
nec pretium quam porta id. Duis pretium non diam sit amet
rhoncus. Quisque dictum urna sed magna pretium, eget tincidunt
ligula condimentum. Sed id risus vitae lectus condimentum
eleifend ut eget nisi. Nunc euismod, arcu et pharetra rhoncus,
diam dui lobortis ex, a scelerisque leo ligula porttitor
velit. Duis ultricies risus urna, quis interdum tellus
lobortis sit amet. Morbi risus nibh, dignissim nec tincidunt
id, pellentesque id nunc. Ut ultrices quam at lorem feugiat,
eget laoreet sem auctor. In augue dolor, porta eget nulla sed,
mattis euismod urna. Nullam vel sapien tellus. Vivamus et arcu
at leo aliquam tempus vitae vel leo. Donec imperdiet lectus a
diam aliquam, vitae ultricies dui vulputate. Nulla id urna
enim. Quisque varius neque vitae egestas hendrerit.</p>
<p>Duis vitae imperdiet quam. Vestibulum congue finibus velit
nec sagittis. Integer vel ex nulla. Nunc in urna dignissim,
ullamcorper enim in, lobortis ligula. Vivamus tellus ligula,
feugiat at diam ac, luctus vestibulum tortor. Cras congue
magna vitae orci posuere volutpat. Duis eu eros rhoncus ligula
auctor elementum. Fusce vulputate ante ut luctus fermentum.
Sed ultricies, est eu lacinia rutrum, nibh purus dictum arcu,
sit amet scelerisque tortor leo vel ligula. Praesent sem leo,
volutpat sed erat vitae, consectetur maximus nibh. Ut at
facilisis tellus. Sed urna ipsum, congue rhoncus turpis eget,
semper commodo libero. Aliquam metus tellus, facilisis ut
posuere vel, lacinia id ex.</p>
<p>Cras quis eros eleifend lorem tempus sodales. Sed semper
sagittis aliquam. Integer a bibendum elit. Nunc dignissim vel
elit id sodales. Phasellus non lorem dolor. Ut viverra diam
sed lacus tincidunt, vel lobortis sapien sodales. Praesent
ante mi, iaculis sed erat vel, ultricies eleifend eros. Donec
a libero vestibulum, dictum orci quis, scelerisque orci.
Maecenas volutpat ex eu ex fermentum interdum.</p>
<p>Cras ut elit risus. Sed semper mi mauris, vel bibendum
augue pharetra efficitur. Vestibulum finibus elit sit amet
velit blandit convallis et dignissim nisi. Etiam nec quam
odio. Sed eget accumsan ante. Mauris cursus nibh a consectetur
ornare. Proin molestie purus sit amet lacinia hendrerit. Sed
in elit mauris. Donec pretium sapien libero. Aliquam sed
tempus lorem. Cras maximus eu urna vitae ultricies. Orci
varius natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Quisque purus lorem, condimentum at
eros vitae, sagittis vestibulum elit. Sed placerat sapien
urna, eget suscipit massa pharetra in. Nulla efficitur ac
ipsum non varius.</p>
<p>Donec quis consequat leo, in aliquet neque. Integer gravida
faucibus diam id eleifend. Aenean at dolor nec ante aliquet
consectetur. Nullam ullamcorper neque facilisis, faucibus nisl
nec, volutpat elit. Fusce facilisis quis nisl sed lobortis.
Suspendisse purus tellus, vulputate a tortor eu, pellentesque
bibendum odio. Fusce nisl nisl, maximus non hendrerit non,
accumsan eu nunc. Vivamus ex tortor, vulputate et tortor et,
pellentesque lobortis orci.</p>
</div>
</div>
然后，您可以拥有多个@media规则，包含各种min-width，max-width，以及orientation，aspect-ratio等等，无论您的需求是什么，在不同情况下获得不同数量的列。
（注意我还在段落中添加了关闭</p>标签，你绝对应该这样做。不要让浏览器推断它们。向浏览器发送无效标记会将它（它们）抛入＆ ＃34;怪癖模式＆＃34;所有关于浏览器如何解释它的赌注都关闭了，因此DOM的结构变得不可预测。所有来自CSS或javascript（或bootstrap）的元素选择都基于 DOM的结构，而不是标记文本本身。）