Question

我很想知道使用Bootstrap将DIV（col-lg-6）定位在流体容器（12列）中的正确方法是什么？

以下是我的设计模型的屏幕截图，它解释了我想要实现的目标：http://d.pr/i/1iBrP。

到目前为止，我已经在Bootstraps网站上读过这样的事情可以通过添加一个偏移类来实现，例如：

<div class="container-fluid">
    <div class="row">
      <h1 class="col-xs-12 col-sm-10 col-md-6 col-sm-offset-1 col-md-offset-3">Auto cargo</h1>
    </div>
</div>

这是一种正确的做法，还是有更好（或更好）的方式来完成这项任务？

另外，如果DIV的宽度为7列，这意味着DIV侧面的列数会有所不同，因为12 - 7 = 5列，5不是偶数？

非常感谢你。

Answer 1

[已编辑回答]

您可以在center-block中使用帮助程序类div，该row可以是.container-fluid { border: 1px solid red; } .col-xs-7 { border: 1px solid blue; } .text-center > .single { display: inline-block; float: none; }。

以下是有关此辅助类的文档：Center content blocks

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container-fluid">
  
  <div class="row">
    <div class="col-xs-7 col-xs-offset-2">
      I'm not centered
    </div>
  </div>
  
  <div class="row">
    <div class="col-xs-7 col-xs-offset-3">
      I'm not centered
    </div>
  </div>
  
  <div class="row center-block">
    <div class="col-xs-7 col-xs-offset-3">
      I'm not really centered
    </div>
  </div>
  
  <div class="row text-center">
    <div class="col-xs-7 single">
      I'm really centered
    </div>
  </div>
  
</div>

center-block

编辑：

我更新了代码段，因为text-center在我给出的示例中不起作用。

因此，您可以使用row上的single以及使用display: inline-block和float: none的名为let playimg : UIImage = UIImage(named: "ic_playButton")! let settingimg : UIImage = UIImage(named: "ic_settingButton")! let playButton : UIBarButtonItem = UIBarButtonItem(image: playimg, style: UIBarButtonItemStyle.Plain , target: self, action: "playAudio") playButton.barTintColor = UIColor.redColor() let settingButton : UIBarButtonItem = UIBarButtonItem(image: settingimg, style: UIBarButtonItemStyle.Plain , target: self, action: "btnSettingAction") settingButton.barTintColor = UIColor.blueColor() self.navigationItem.rightBarButtonItems = [settingButton,playButton]的自定义类。

Answer 2

如果你有7列你不能用纯Bootstrap中心，你可以这样做：

的

col-xs-12

您的代码是正确的，但您无需设置div width = 100%类（它会在没有该类的情况下自动在移动设备上设置12列 - col-md-6。
您为中等屏幕尺寸设置了col-md-offset-3和lg，这意味着它在大型（<h1 class="col-sm-10 col-md-6 col-sm-offset-1 col-md-offset-3 col-lg-12 col-lg-offset-0">Auto cargo</h1>）屏幕上会相同，如果您想在大屏幕上重置它必须这样做（更改列大小和重置偏移量）：

的

h1

您不应该在<div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-10 col-md-6 col-sm-offset-1 col-md-offset-3"> <h1>Auto cargo</h1> </div> </div> </div>元素上设置此类，这是更好的方法：

的

{{1}}

Answer 3

您不需要执行这些复杂的代码，只需使用下面的代码，这将适用于所有屏幕。

＆＃13;

        <div class="container-fluid">
          <div class="col-sm-6 col-sm-offset-3 text-center">
            <h2>Lorem ipsum dolor sit amet</h2>
          </div>
        </div>

＆＃13;

Bootstrap：如何正确地将6列DIV置于流体容器内

3 个答案: