Question

我在这个简单的页面上工作，我正在寻找仅使用引导程序代码对页面进行居中（如果可能的话）这就是我到目前为止所做的。我尝试使用col-xl-offset-4，但没有工作。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="jumbotron">
    <div class="row vertical-center-row">
      <div class="col-xl-6 col-xl-offset-4">
        <h1 class="text-primary text-center">Marcell Treville</h1>
        <h3 class="text-center"><em>This is a tribute page for the legendary painter "Marcell Treville"</em></h3>
        <div class="thumbnail">
          <img src="">
          <p>this is some text describing the image</p>
          <h2>Here's a timeline of Dr. Marcell Treville</h2>
          <ul>
            <li><strong>1995</strong> item one</li>
            <li>item one</li>
            <li>item one</li>
            <li>item one</li>
            <li>item one</li>
            <li>item one</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

您无需使用抵消。尝试将“文本中心”添加到此div

HTML

IBUFDS IBUFDS_[0].clk
    (
     .I (input1_reg[0]),        
    .IB (input1b_reg[0]),
    .O  (output_reg[0])
     );


IBUFDS IBUFDS_[1].clk
    (
     .I (input1_reg[1]),        
    .IB (input1b_reg[1]),
    .O  (output_reg[1])
     );

希望这会有所帮助

Answer 2

对于bootstrap v4，只需使用row justify-content-center即可。

参考：https://v4-alpha.getbootstrap.com/layout/grid/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<div class="container">
  <div class="jumbotron">
    <div class="row justify-content-center">
      <div class="col-6">
        <h1 class="text-primary text-center">Marcell Treville</h1>
        <h3 class="text-center"><em>This is a tribute page for the legendary painter "Marcell Treville"</em></h3>
        <div class="thumbnail">
          <img src="">
          <p>this is some text describing the image</p>
          <h2>Here's a timeline of Dr. Marcell Treville</h2>
          <ul>
            <li><strong>1995</strong> item one</li>
            <li>item one</li>
            <li>item one</li>
            <li>item one</li>
            <li>item one</li>
            <li>item one</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

你想要偏移3，因为这将加起来为12.如果你偏移4，你将有4'空'col，接下来的6个div，以及2个'empty'cols。你想要的是3-6-3。你现在拥有的是4-6-2。

我怎样才能使用bootstrap将这个html页面居中

3 个答案: