如何在HTML搜索方法中修复色彩大小？ [英] How to fix coloumn size during search method in html?
本文介绍了如何在HTML搜索方法中修复色彩大小？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在执行搜索，并在搜索结果中出现。但是当组织名称变大时。对齐完全改变。
< div class =col-sm-6 col-md-4 p0我怎样才能解决这个问题？ v-for =post in datav-if =data.indexOf（post）< = 6>
< div class =box-two proerty-item>
< div class =item-thumb>
< a href =property-1.html>< img src =/ static / assets / img / demo / property-1.jpg>< / a>
< / div>
< div class =item-entry overflow>
< h5>< a v-bind：href ='/ details /'+ post.pid> {{post.bussinessName}}< / a>< / h5>
< div class =dot-hr>< / div>
< span class =pull-left>< b>城市：< / b> {{post.city}}< / span>
< span class =proerty-price pull-right> {{post.contactNumber}}< / span>
< / div>
< / div>
< / div>
这是我的html代码。
如果{{post.bussinessName}}是一个bigname对齐，如图所示完全改变，我怎样才能纠正它。
解决方案
bootstrap 4自动为您解决问题，请参阅下面的代码，它将为您解决问题。
<！DOCTYPE html>< html> < HEAD> < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.cssintegrity =sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshbcrossorigin =anonymous > < link rel =stylesheethref =style.css/> < script src =script.js>< / script> < /头> <身体GT; < div class =row> < div class =col-sm-2 mt-2>< div class =bg-primary> qweqweqw eqweq weqweqwq< / div>< / div> < div class =col-sm-2 mt-2>< div class =bg-primary> qweqweq< / div>< / div> < div class =col-sm-2 mt-2>< div class =bg-primary> qweq weqweqwe< / div>< / div> < div class =col-sm-2 mt-2>< div class =bg-primary> qweqwe< / div>< / div> < div class =col-sm-2 mt-2>< div class =bg-primary> qweq< / div>< / div> < div class =col-sm-2 mt-2>< div class =bg-primary> qweqwe qwe< / div>< / div> < div class =col-sm-2 mt-2>< div class =bg-primary> qweqwe< / div>< / div> < div class =col-sm-2 mt-2>< div class =bg-primary> qwe asdasd< / div>< / div> < div class =col-sm-2 mt-2>< div class =bg-primary> asda qweqwe< / div>< / div> < div class =col-sm-2 mt-2>< div class =bg-primary> asd adasd asdasdasd aadasdasd asdasd< / div>< / div> < div class =col-sm-2 mt-2>< div class =bg-primary> asdasd asdasd< / div>< / div> < div class =col-sm-2 mt-2>< div class =bg-primary> ad< / div>< / div> < div class =col-sm-2 mt-2>< div class =bg-primary> asdasd< / div>< / div> < div class =col-sm-2 mt-2>< div class =bg-primary> zxczxczxc< / div>< / div> < / DIV> < / body>< / html>
I am implementing a search and on that search results come. BUT WHEN the organization name becomes big. The alignment completely changes. How can I able to fix the same.
<div class="col-sm-6 col-md-4 p0" v-for="post in data" v-if="data.indexOf(post) <= 6">
<div class="box-two proerty-item">
<div class="item-thumb">
<a href="property-1.html" ><img src="/static/assets/img/demo/property-1.jpg"></a>
</div>
<div class="item-entry overflow">
<h5><a v-bind:href="'/details/'+post.pid">{{post.bussinessName}}</a></h5>
<div class="dot-hr"></div>
<span class="pull-left"><b>City :</b> {{post.city}} </span>
<span class="proerty-price pull-right">{{post.contactNumber}}</span>
</div>
</div>
</div>
This is my html code.
If {{post.bussinessName}} is a bigname alignment changes completely as in figure, How can I able to correct it.
解决方案
bootstrap 4 autommatically solves the issue for you, see the code below, it will solve the issue for you.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="row">
<div class="col-sm-2 mt-2"><div class="bg-primary">qweqweqw eqweq weqweqwq</div></div>
<div class="col-sm-2 mt-2"><div class="bg-primary">qweqweq</div></div>
<div class="col-sm-2 mt-2"><div class="bg-primary">qweq weqweqwe</div></div>
<div class="col-sm-2 mt-2"><div class="bg-primary">qweqwe </div></div>
<div class="col-sm-2 mt-2"><div class="bg-primary">qweq</div></div>
<div class="col-sm-2 mt-2"><div class="bg-primary">qweqwe qwe</div></div>
<div class="col-sm-2 mt-2"><div class="bg-primary">qweqwe</div></div>
<div class="col-sm-2 mt-2"><div class="bg-primary">qwe asdasd</div></div>
<div class="col-sm-2 mt-2"><div class="bg-primary">asda qweqwe</div></div>
<div class="col-sm-2 mt-2"><div class="bg-primary">asd adasd asdasdasd aadasdasd asdasd </div></div>
<div class="col-sm-2 mt-2"><div class="bg-primary">asdasd asdasd</div></div>
<div class="col-sm-2 mt-2"><div class="bg-primary">ad</div></div>
<div class="col-sm-2 mt-2"><div class="bg-primary">asdasd</div></div>
<div class="col-sm-2 mt-2"><div class="bg-primary">zxczxczxc</div></div>
</div>
</body>
</html>
这篇关于如何在HTML搜索方法中修复色彩大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
