html - 我该怎么做才能保持动态列表？

Question

我正在制作一页产品，但遇到了一些困难，文字使盒子变大，然后干扰了其余部分，看起来就像图片一样。我感谢任何可以提供帮助的人，只要 loyate 保持响应，这符合决议。谢谢

正常 降低分辨率并改变位置

<section class="col-xs-10 col-xs-offset-1 boxContent destaques">
    <div class="col-xs-12">
    @foreach ( $produtos as $produto )


            <div class="col-xs-12 col-sm-4 col-md-3 boxProduto">
        <!--<a href="{{ route('produto', $produto->id_produto) }}">-->
            <a href="{{ route('produto', $produto->id_produto) }}">
                <div class="col-xs-12 imgProd ">
                    <img  src="{{ $produto->url_imagem }}" class="img-responsive" >
                </div>
            </a>

                <span style=" overflow-wrap: break-word;
    padding: 15px;
    word-wrap: break-word;
    margin: center;">
                    {{ $produto->nome }}
                </span>

            <div class="col-md-12 preco">
                    <p>{{ $produto->pvp }}€&lt;/p>
            </div>

            <div class="col-xs-12 detalhes">
                DETALHES
            </div></div>
        </div>

@endforeach
<!--</a>-->
</section>


<style>
    .boxProduto {
        padding: 0px !important;
        margin: 10px 1%;
        border: 1px solid #ccc;
        border-radius: 2px ;display: block;
        text-align: center;
    }

    .destaques {

    h1 {
        width: 60%;
    }

    .hr {
        width: 21%;
    }


    .boxContent {
        padding: 15px 25px !important;
        margin-bottom: 15px;
        background: white;
        box-shadow: 0px 0px 11px #ddd;
        width: 100%;
        float: left;
        margin-bottom: 0px;
    text-align: center;}

</style>

标签： htmlcss