Question

我知道标题可能不太准确，但我会尽力说清楚。此外，如果你有一个想法如何让它听起来更好，请让我知道，我会改变它。

以下是问题的解决方法：

（对不起语言）

所以基本上我有一个基于bootstrap的代码，它工作得很好，在不同的设备上看起来不错，但每个标题中的单词大小不同，所以当我调整屏幕大小时，这些行显然会破坏并且标题的高度变大，这使得图标和段落向下移动。它看起来不太好看。有没有办法根据第一列的标题更改第三段和图标的边距？或者任何使它看起来很好的方法？

提前致谢：）

这是css：

   h6
   {
    font-size:0.95em;
    color:rgb(52, 73, 94);
    padding:0;  
    }

   .pad
   {
    padding:15px;   
   }

   #icon
   {
    width:60px;
    display:inline-block;
    }

   p4
   {
    color:rgb(136, 138, 140);
    text-transform:none;
    font-size:0.6em;
    font-weight:normal;
    display:inline-block;
    width:72%;
    vertical-align:top;
    padding-top:5px;
    max-width:474px;
    }

和HTML：

    <div class="row">
        <div class="col-md-4 marg"> 
        <h6 class="pad"> Szkolenia pierwszej pomocy </h6> <img src="images/doctor-suitecase-64.png" id="icon"> <p4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante.  </p4>       <div class="more"> Czytaj więcej... </div>
        </div>
        <div class="col-md-4 marg"> 
        <h6 class="pad"> Tworzenie dokumentacji </h6> <img src="images/text-file-5-64.png" id="icon"> <p4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante.  </p4>    <div class="more"> Czytaj więcej... </div>
        </div>

        <div class="col-md-4 marg"> 
        <h6 class="pad"> Kontrola jakości <br> </h6> <img src="images/workers-64.png" id="icon"> <p4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante.  </p4> <div     class="more"> Czytaj więcej... </div>
        </div>
    </div>

Answer 1

这是一个解决方案。这适用于您的情况

<强> HTML

<div class="row">
    <div class="col-sm-4 marg"> 
        <h3 class="pad1"> Szkolenia pierwszej pomocy </h3>
        <img src="images/doctor-suitecase-64.png" id="icon">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante.  </p>
        <div class="more"> Czytaj więcej... </div>
    </div>
    <div class="col-sm-4 marg"> 
        <h3 class="pad2"> Tworzenie dokumentacji</h3>
        <img src="images/text-file-5-64.png" id="icon">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante.</p>
        <div class="more"> Czytaj więcej... </div>
    </div>

    <div class="col-sm-4 marg"> 
        <h3 class="pad3"> Kontrola jakości</h3>
        <img src="images/workers-64.png" id="icon">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante.</p>
        <div class="more"> Czytaj więcej... </div>
    </div>
</div>

<强>的jQuery

    <script type="text/javascript">
        $(window).resize(function () {
            var heig1 = $(".pad1").height();
            var heig2 = $(".pad2").height();
            var heig3 = $(".pad3").height();
            var lrg = Math.max(heig1, heig2, heig3);
            if(lrg == heig1){
                $(".pad2,.pad3").height(lrg);
            }
            else if(lrg == heig2){
                $(".pad1,.pad3").height(lrg);
            }
            else{
                $(".pad1,.pad2").height(lrg);
            }
        });
    </script>

Answer 2

我建议您查看flexbox，因为这可能会解决您的问题。 Flexbox具有flex-grow，flex-shrink和flex-basis（或简写，flex），可以解决您遇到的这个问题。它帮助我解决了类似的问题。

来源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

Check this fiddle here

你需要的是，只需正确使用 bootstrap网格，

示例HTML

<div class="col-sm-4">
    <div class="row">
        <div class="col-md-2"><span class="glyphicon glyphicon-briefcase"></span></div>
        <div class="col-md-10">
            <h3>This is the heading and I like it very much than anything</h3>
            <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics.</p>
        </div>
    </div>
</div>

如何根据其他元素更改保证金？

3 个答案: