动作

Question

我有What We Do section。每个部分都有title和paragraph，因为您可以看到该段落在我的3个部分之间不平衡。我的目标是调整我的Learn More btn。如果我在每个<p>标记后面放置了我的更多btn，它们看起来会非常不均匀。

动作

所以我决定用这3个btns创建另一行。好吧它在桌面/ iPad屏幕上看起来很棒，但不幸的是在电话尺寸上，它们相互叠加。

桌面/ ipad公司

enter image description here

电话

enter image description here

我把我在这里的东西放在一起：JSfiddle

关于如何实现这一目标的任何提示/建议？

Answer 1

        <!--Features-->
        <section class="page-block" id="about">
          <div class="container">
            <div class="row page-header">
              <h2 >What We Do</h2>
            </div>
            <div class="row text-center">
              <div class="col-sm-4">
                <div class="feature-img"> <img class="img-center" width="30%" src="img/features/education.png" alt="Tutti.ed"/> </div>
                <h3><a href="/tutti-ed">Tutti.ed</a></h3>
                <p style="text-align: justify;min-height:200px;" >
                  Tutti.ed is an educational software framework that serves as the backbone for robust digital learning products.
                  Your brand, your content, your instructional vision... our technology.
                  View our gallery to see sample products.
                  </p><p><a class="btn btn-success" href="/tutti-ed">Learn more </a></p>
              </div>  
              <div class="col-sm-4">
                <div class="feature-img"> <img class="img-center" width="30%" src="img/features/code.png" alt="Tutti.dev"/> </div>
                <h3><a href="/tutti-dev">Tutti.dev</a></h3>
                <p style="text-align: justify;min-height:200px;" >
                  Tutti.dev makes the work of software professionals easier by facilitating all stages of the software development lifecycle.
                  Tutti.dev was created by developers, for developers. We set out to create the toolset we always wished we had to make our work easier.</p>
                <p><a class="btn btn-success" href="/tutti-ed">Learn more </a></p>
              </div>
              <div class="col-sm-4">
                <div class="feature-img"> <img class="img-center" width="26%" src="img/features/service.png" alt="Services"/></div>
                <h3><a href="/services">Services</a></h3>
                <p style="text-align: justify;min-height:200px;" >
                  Aveniros can help your company in every or any phase of development.
                  We provide tools and development expertise to every project to ensure a successful launch.
                </p><p><a class="btn btn-success" href="/tutti-ed">Learn more </a></p>
              </div>
            </div>
          </div>
        </section>

        and style  is

            .feature-img{
             height:150px;
            }

Answer 2

好的，这是非常有趣的问题。这是我的解决方案。首先，对按钮使用单独的行是一个deadend。

您可以尝试将按钮设置在相对于行的位置，并使用if (result != expectedValues[i]) Assert.Fail("Wrong value!")堆叠到最底部。这样您就可以正确对齐按钮。

您需要确保此定位仅对非移动分辨率有效。使用媒体查询：

bottom: 0

和HTML：

@media (min-width: 768px) {
    .row-relative {
        position: relative;
    }
    .row-relative > div {
        position: static;
    }
    .row-relative .btn-bottom {
        position: absolute;
        bottom: 0;
    }    
}

演示： http://plnkr.co/edit/GsnkSYi10XQKgvOUrWv2?p=info

Answer 3

试试这个，将min-height添加到p标签：

HTML：

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <div class="box">
                <div class="icon"></div>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
                <button class="btn btn-default">
                    <span>Button</span>
                </button>
            </div>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-34 col-lg-4">
            <div class="box">
                <div class="icon"></div>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                <button class="btn btn-default">
                    <span>Button</span>
                </button>
            </div>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <div class="box">
                <div class="icon"></div>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                <button class="btn btn-default">
                    <span>Button</span>
                </button>
            </div>
        </div>
    </div>
</div>

css：

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.box{
    text-align: center;
}
.box .icon{
    height: 50px;
    width: 50px;
    margin: 12px auto;
    border: 1px solid red;
}
.box p{
    display: block;
    text-align: justify;
    font-size: 12px;
    min-height: 100px;
}

JSFiddle Demo

Answer 4

使用媒体查询隐藏和显示不同宽度的内容

我添加了p内容下的按钮，并添加了引导类以隐藏在小型中型和大型显示器上：

<div class="text-center hidden-md hidden-sm hidden-lg"><a class="btn btn-success" href="/tutti-ed">Learn more </a>

然后在底部的行中添加.hidden-xs以获得额外的小显示（移动设备）。

<div class="row hidden-xs">

http://jsfiddle.net/Bosc/edf7mzdm/8/

这可以使用.hidden-*类.-hidden-md来完成，例如，将在中型显示器上隐藏此类的内容。您可以在http://getbootstrap.com/css/#responsive-utilities

查看所有可用选项

如何将所有按钮放在同一行而不是将它们堆叠在手机视口上？

动作

4 个答案: