Twitter bootstrap 3 引导3列对齐

Twitter bootstrap 3 引导3列对齐,twitter-bootstrap-3,Twitter Bootstrap 3,我的(常见)问题: 我觉得BootStrap 3列对齐是一个老问题或常见问题,但我不确定如何表达自己,通过谷歌搜索在线找到具体答案,因此我在这里发布这篇文章 以下是我的布局示例: 布局描述: 如果你看第一列,左下角的第二行,你会看到一个很长的标题,现在与右下角的第二列段落对齐不好,看起来不专业/无意 我尝试的是: 我已经尝试为h4标记创建一个特定的最小高度,但是,布局当然会随着视口的变化而改变 我尝试过特定的CSS属性(如中心修复或flex?),这只会使元素在父div中居中,它仍然看起来不太专

我的(常见)问题:

我觉得BootStrap 3列对齐是一个老问题或常见问题,但我不确定如何表达自己,通过谷歌搜索在线找到具体答案,因此我在这里发布这篇文章

以下是我的布局示例:

布局描述:

如果你看第一列,左下角的第二行,你会看到一个很长的标题,现在与右下角的第二列段落对齐不好,看起来不专业/无意

我尝试的是: 我已经尝试为h4标记创建一个特定的最小高度,但是,布局当然会随着视口的变化而改变

我尝试过特定的CSS属性(如
中心修复
flex
?),这只会使元素在父div中居中,它仍然看起来不太专业

我的代码:

<style type="text/css">


.feature{

    margin-bottom: 6%;
    padding-left: 40px;
    padding-right: 40px;

}


.bottom_icon_padding {

    margin-bottom: 27px;


}



#other_features h4 {
    text-align: center;
    min-height:10%;

}



.field-item img {

    padding: 0px;

}



</style>




<div class="col-md-offset-1 col-md-10">

    <h4 style="color:#666;line-height: 2.3rem;">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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h4>
    <hr>


</div>




<div class="col-sm-12" id="other_features">

    <div class="row">

        <div class="col-md-offset-1 col-md-5 feature" ><img alt="Unmeeting Logo" src="/sites/default/files/unmeeting_logo.png" />

            <h4 class="bottom_icon_padding" >Unmeeting RFAs</h4>

            <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>

            <p><a href="collaboration/regional-consortia">Learn more</a></p>
        </div>

        <div class="col-md-5 feature" ><img alt="Synergy Logo" src="/sites/default/files/synergy_logo.png" />
            <h4 class="bottom_icon_padding" >Synergy RFAs</h4>

            <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>

            <p><a href="https://trialinnovationnetwork.org/" target="_blank">Learn more</a></p>
        </div>

    </div>

    <div class="row" >

        <div class="col-md-offset-1 col-md-5 feature" ><img alt="Certificate Variant With Image" src="/sites/default/files/030-certificate-variant-with-image.png" />
            <h4 class="bottom_icon_padding" >CTSA Program Collaborative Innovation Awards: Administrative Supplements</h4>

            <p>These supplements allow investigators from two or more CTSA Program hubs to form collaborations to implement, assess, and/or disseminate discoveries in methods, approaches, education and training in clinical and translational science.</p>

            <p><a href="https://ncats.nih.gov/ctsa/about/ccia/supplements">View site</a></p>
        </div>

        <div class="col-md-5 feature" ><img alt="Premium Badge" src="/sites/default/files/035-premium-badge.png" />
            <h4 class="bottom_icon_padding" >SmartIRB</h4>

            <p>SMART IRB is a platform designed to ease common challenges associated with initiating multisite research and to provide a roadmap for institutions to implement the NIH Single IRB Review policy.</p>

            <p><a href="https://smartirb.org" target="_blank">View site</a></p>
        </div>

    </div>
</div>

.特征{
利润底部:6%;
左侧填充:40px;
右边填充:40px;
}
.底部\u图标\u填充{
边缘底部:27px;
}
#其他功能h4{
文本对齐:居中;
最小高度:10%;
}
.字段项img{
填充:0px;
}
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来,Lorem Ipsum一直是行业标准的虚拟文本,当时一位不知名的印刷商拿起一个打印工具,将其拼凑成一本打印样本书。它不仅存活了五个世纪,而且还跨越到电子排版,基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行,最近随着Aldus PageMaker等桌面出版软件的发布,包括Lorem Ipsum版本。

未满足要求的区域渔业协定 Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来,Lorem Ipsum一直是行业标准的虚拟文本

协同作用区域渔业协定 Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来,Lorem Ipsum一直是行业标准的虚拟文本

CTSA计划合作创新奖:行政补充 这些补充资料允许来自两个或更多CTSA项目中心的研究人员形成合作,以实施、评估和/或传播临床和转化科学方法、方法、教育和培训方面的发现

SmartIRB SMART IRB是一个平台,旨在缓解与启动多站点研究相关的常见挑战,并为机构实施NIH单一IRB审查政策提供路线图

我的问题:
这是为一个对布局有很多限制的客户端设计的,这样我就不能随意移动任何东西,有人能提出任何建议,使底部两个段落的部分对齐,而不管视口大小如何吗?

如果您确信网站中的内容,可以有一个解决方案来设置最小高度:40px。 另一个解决方案是修改结构,使图像位于一行,而描述文本位于下一行。如果适合你,你可以发布详细信息

功能{
利润底部:6%;
左侧填充:40px;
右边填充:40px;
}
.底部\u图标\u填充{
边缘底部:27px;
}
#其他功能h4{
文本对齐:居中;
最小高度:40px;
}
}
.字段项img{
填充:0px;
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来,Lorem Ipsum一直是行业标准的虚拟文本,当时一位不知名的印刷商拿起一个打印工具,将其拼凑成一本打印样本书。信息技术
它不仅存活了五个世纪,而且还跨越到电子排版,基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行,最近随着desktop的发布而流行
发布软件,如Aldus PageMaker,包括Lorem Ipsum版本。

未满足要求的区域渔业协定 Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来,Lorem Ipsum一直是行业标准的虚拟文本

协同作用区域渔业协定 Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来,Lorem Ipsum一直是行业标准的虚拟文本

CTSA计划合作创新奖:行政补充 这些补充资料允许来自两个或更多CTSA项目中心的研究人员形成合作,以实施、评估和/或传播临床和转化科学方法、方法、教育和培训方面的发现

SmartIRB SMART IRB是一个平台,旨在缓解与启动多站点研究相关的常见挑战,并为机构实施NIH单一IRB审查政策提供路线图