使用bootstrap对齐div内容

Question

我需要一个div，它应该在桌面视图上对齐，但是当它响应时，它应该对齐到左边或中心。

<div class="container">
    <div class="row">
        <div class="col-md-4 text-right">Name:</div>
        <div class="col-md-4">
        <input class="form-control" type="text">
        </div>
    </div>
</div>

这里div为标签＆＃39;名称＆＃39;是我的目标。

我的测试平台，请将视图更改为移动视图here

在桌面视图中，我需要右侧的div内容（靠近文本框）。我使用了＆＃39; text-right＆＃39;实现这一目标（这可能不是必需的）。

  

在移动视图中（在img下方），div内容位于右侧（这是因为＆＃39;右文字＆＃39;）。但我需要在左侧。

如果没有＆＃39; text-right＆＃39;，就像（在img下面），在我的代码中我添加了＆text;对＆＃39;为了使它在右侧（可能不需要）。

目标：我需要右侧的div内容用于桌面视图，当它进入移动视图时我需要它在左侧。 请忽略我的代码中的文本右侧

Answer 1

你可以使用媒体查询，在这个例子中我假设它将被定位为绝对。

.container{
position: absolute;
right: 0px;
width: 400px;
}

@media screen and (max-width: 1000px) {

.container{
right: auto;
left: 50%;
margin-left: -200px;
}

Answer 2

＆＃13;

＆＃13;

<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-push-4 ">Name:</div>
    <div class="col-md-4 col-md-pull-4">
      <input class="form-control" type="text">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

试试这个。 ：）