如何在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搜索方法中修复色彩大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！