如何以登录表单为中心？我正在使用bootstrap列,但它不起作用.

这是我的代码:

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-6">
            <h2>Log in</h2>   
            <div>
                <table>
                    <tr>
                        <td>1</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>3</td>
                    </tr>
                 </table>
             </div> 
        </div>
    </div>
</div>

我已经开始学习Bootstrap了.我的问题是如何水平居中对齐列,bootstrap包含12列布局,没有中间数.为了更清楚,如果它是11列布局,中间的数字将是6(左边5列,中间1列,右边5列)

我在Bootstrap 4:Bootply链接中进行了以下设置

其中带有"Supplier"文本的元素应该是垂直居中的,我有不同的行,代码相同,我希望它们居中.没有解决方案似乎对我有用.

有人可以在这里找到我做错了什么,并指出我正确的方向？

谢谢.

我正在使用Bootstrap创建一个图像滑块,并且有一个我似乎无法解决的问题.

在此滑块的每个实例下,我将有3列缩略图(每行4个).但是,有些滑块不会有4个缩略图,有些会有1个,2个或3个.在这些情况下,我想将缩略图水平居中,同时保持相同的15px排水沟,如果有4个.

现在当只有2个缩略图时,这很容易,因为我只需在缩略图集之前和之后添加一个空的3列div.当只有一个缩略图时,我可以删除float并使用margin:0 auto;中心,但是当有3个缩略图时我无法弄清楚要做什么.

任何人都可以告诉我,实现这一目标的最佳方法是什么？我认为能够设置半列是很好的,所以我可以在缩略图之前和之后放置一个空的1.5列div.这可行吗？

以下是3缩略图版本的示例代码:

<div id="container">

  <div class="row">

    <!-- Full Size Image -->
    <div class="col-sm-12">
      <img src="http://placehold.it/960x300" />
    </div>

    <!-- Slider Thumbnails -->
    <div class="col-sm-3">
      <img src="http://placehold.it/200x150" />
    </div>
    <div class="col-sm-3">
      <img src="http://placehold.it/200x150" />
    </div>
    <div class="col-sm-3">
      <img src="http://placehold.it/200x150" />
    </div>

  </div>

</div>

我已经设置了一个Bootply来展示我如何解决1个缩略图和2个缩略图版本:

Bootply

我试图在我的引导页面中将YouTube嵌入式视频与页面中心对齐.视频的大小始终相同.

我的HTML看起来很简单:

<div class="video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>

我尝试了stackoverflow的不同解决方案(它只针对div而不是视频),而我能想到的最好的解决方案就是这个小提琴.

我已经尝试过solution1,solution2,solution3但没有结果.另一个部分成功的解决方案是使用:

width: 50%;
margin: 0 auto; 

它在桌面上运行良好,但在iPad或手机上失败(视频部分在屏幕之外).如何在桌面/平板电脑/手机中正确居中视频？

我觉得这是一个非常奇怪的问题,但我似乎无法在网上找到解决方案.

如果我有col-md-5,我似乎无法居中.据我所知网格系统,如果我选择列大小(1-12),为了控制列的位置,我使用col - ## - offset-#.

所以如果我有一个col-md-4,我会用col-md-offset-4它从左边推4列,然后它会居中.我们的想法是,要使列居中,网格中的左侧和右侧的列必须相同.

现在,如果我有一个,让我们说,col-md-5怎么办？我该如何居中呢？做类似的事情col-md-4会从右边留下3.我尝试了几件事但没有成功.

提前致谢.

我的代码就像

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-3"></div>
        <div class="col-md-3"></div>
    </div>
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-2"></div>
    </div>
</div>

我想将这些9列和4列居中.用bootstrap做正确的方法是什么.我尝试了第二种情况

<div class="row">
    <div class="col-md-2 col-md-offset-4"></div>
    <div class="col-md-2"></div>
</div>

有用.我该怎么用来居中第一排的9列.

我正在使用Bootstrap 3.我使用了两列col-md-4和col-md-2行内.现在我想把两列放在行中.我用过text-left,col-md-2因为它内的按钮需要保持对齐.我使用以下代码来使列居中,但它对我不起作用.

<div class="jumbotron">
    <div class="row text-center">
        <div class="col-md-4">
            <div class="input-group input-group-lg">
                <div class="input-group-btn text-left">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">option 1<span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">option 1</a></li>
                        <li><a href="#">option 2</a></li>
                        <li><a href="#">option 3</a></li>
                    </ul>
                </div><!-- /btn-group -->
                <input type="text" class="form-control">
            </div><!-- /input-group -->
        </div>
        <div class="col-md-2 text-left">
            <button type="button" class="btn btn-default btn-lg">  Search  <span class="glyphicon glyphicon-search"></span></button>
        </div>
    </div><!-- /row -->
</div>

在一些文本信息之后，我在主页中创建了一个 Bootstrap Carousel。我不想在页面中出现大的轮播，因此我使用 减小了大小<div class="col-sm-6">。但我的轮播位于页面的左侧，我无法将其居中。我想把它放在页面的中央。我使用的代码是：

<div class="container">
<h4 class="text-justify">text here </h4>
</div>

<div class="container">
    <div class="col-sm-6">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active"><img src="https://upload.wikimedia.org/xx.JPG" alt=""></div>
          <div class="item"><img src="https://upload.wikimedia.org/wikipedia/xxxx.JPG" alt=""></div>
          </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span></a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" …