相关疑难解决方法(0)

我正在使用Twitter Bootstrap 3,当我想垂直对齐时我遇到问题div,例如 - JSFiddle链接:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

Bootstrap中的网格系统float: left不使用display:inline-block,因此该属性vertical-align不起作用.我尝试使用margin-top它来修复它,但我认为这对于响应式设计来说不是一个好的解决方案.

我正在寻找一种垂直居中对齐containerdiv的方法,jumbotron并将其设置在页面中间.

在.jumbotron必须适应屏幕的整个高度和宽度,所以我用这个CSS.

.jumbotron {
  height:100%;
  width:100%;
}
.container {
  width:1025px;
}
.jumbotron .container {
  max-width: 100%;
} 

的.containerdiv有一个宽度1025px和应在该页面(垂直中心)的中间.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
    <div class="container text-center">
        <h1>The easiest and powerful way</h1>
        <div class="row">
            <div class="col-md-7">
                 <div class="top-bg"></div>
            </div>

            <div class="col-md-5 iPhone-features" style="margin-left:-25px;">
                <ul class="top-features">
                    <li>
                        <span><i class="fa fa-random simple_bg top-features-bg"></i></span>
                        <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
                        <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
                    </li>
                    <li>
                        <span><i class="fa …

有没有办法在主要父母的内部垂直或水平居中html元素？

我需要使用bootstrap创建一个响应式页面,在页面中心放置一个div,就像下面提到的布局一样.

我有一个只存在表单的页面,我希望将表单放在屏幕的中心.

<div class="container">
  <div class="row justify-content-center align-items-center">
    <form>
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>  
</div>

该justify-content-center对齐表格水平,但我无法弄清楚如何垂直对齐.我试过使用align-items-center和align-self-center,但它不起作用.

我错过了什么？

DEMO

我需要帮助来解决问题,我需要将内容集中在bootstrap4中的列中,请在下面找到我的代码

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3">
        <div class="nauk-info-connections">
        </div>
     </div>
</div>

我写了一个非常基本的脚本来加载/删除一个类加载或调整窗口大小.

我只是想知道是否有更好的方法来做这个或者是否有可能减少代码行.

基本上我希望能够在较小的屏幕上查看网站时改变样式.我认为最好在html标签的某个宽度下添加一个新类...

不管怎样,这是我的代码.

<script type="text/javascript">
 $(document).ready( function() {
    /* Check width on page load*/
    if ( $(window).width() < 514) {
     $('html').addClass('mobile');
    }
    else {}
 });

 $(window).resize(function() {
    /*If browser resized, check width again */
    if ($(window).width() < 514) {
     $('html').addClass('mobile');
    }
    else {$('html').removeClass('mobile');}
 });

谢谢

阿娇

如何将列中的文本垂直居中(bootstrap 4)？结构基本,见:

<div class="row">
    <div class="col-md-6">
        <span>Text to center</span>
    </div
</div>

Ty伙计们!

我想把我的文字垂直居中

div class ="col-md-6"

并具有相同的高度

例:

我的容器组件如下所示：

<Container className="contact-content debug-border">
    <Row className="justify-content-center">
        <Col md={2} className="text-center text-md-right">
            Phone:
        </Col>
        <Col md={3} className="text-center text-md-left">
            XXXXXXXXX
        </Col>
    </Row>
    <Row className="justify-content-center">
        <Col md={2} className="text-center text-md-right">
            Email-ID:
        </Col>
        <Col md={3} className="text-center text-md-left">
            XXXXXXXXXXX
        </Col>
    </Row>
</Container>

我的CSS如下：

.contact-content{
    height: 83vh;
}

.debug-border{
    border: 2px;
    border-style: dashed;
}

它看起来是这样的： 我想要的是电话和电子邮件数据的行和列显示在页面中间

我尝试过的：

我尝试向容器添加类：

• 对齐内容中心
• 对齐项目中心
• 内容居中对齐
• 项目中间对齐
• 中间对齐
• 我的汽车
• py自动

它对网页的外观没有任何影响。

我将 padding:40vh 添加到 contact-content css 类中，它起作用了，但我想知道 bootstrap 中是否有任何类可以将容器内的行和列与页面中间对齐。