Question

使用我当前的代码，“test”段落横跨整个页面。我希望宽度包装文本(width:auto)，但这不起作用。此元素旨在成为页面中心的按钮。顺便说一句，我正在使用Bootstrap 3.0 Grid系统。

HTML：

<body>
<div class="container-fluid" id="FullContainer">
    <!-- Cover Page -->
    <div class="row" id="CoverPageRow"> 
        <div class="col-xs-12", id="HeaderText"> Mastery Wireframe </div>
        <div class="col-xs-12", id="SubHeaderText"> Become a master at what you do. </div>
        <div class="col-xs-12", id="DiscoverMoreButton"> <p id="test"> Discover More </p></div>
    </div>
</div>
</body>

CSS：

.col-md-12 {
    height: auto;
    color: white;
    text-align: center;
    font-size: 200%;
}

#test {
    background-color: blue;
    border: 1px white solid;
    width: auto;
}

那么如何将宽度设置为自动，以便此按钮不会跨越整个页面？

Answer 1

<p>标签默认为块级别。如果您将其设为inline-block，然后将其父级设置为text-align: center则应该有效。请注意，您不会需要width: auto。

#DiscoverMoreButton {
  text-align: center;
}

#test {
  background-color: blue;
  border: 1px white solid;
  display: inline-block;
}

<强> Demo

请注意，col-xs-12表示100％宽。因此，这里并不需要它，因为<div>默认为100％宽。

因此，您可以减少所有内容，并使用一些Bootstraps帮助程序和按钮类来居中并设置btn（.text-center和btn btn-primary）的样式。

<div class="container-fluid" id="FullContainer">
  <!-- Cover Page -->
  <div id="CoverPageRow"> 
    <div id="HeaderText">Mastery Wireframe</div>
      <div id="SubHeaderText">Become a master at what you do.</div>
      <div class="text-center">
        <a href="#" class="btn btn-primary">Discover more</a>
      </div>
  </div>
</div>

<强> Demo 2

Answer 2

删除段落标记并使用偏移类来使按钮居中可能更好。请参阅此处的文档：http://getbootstrap.com/css/

<div class="col-xs-4 col-xs-offset-4">Button text here</div>

另外，您为什么不使用btn类代替按钮？

Answer 3

真正快速的答案是使用 .text-center

示例：

<div class="row text-center">
  <div class="col">
    <p>Some centered content here</p>
  </div>
</div>

如何将元素移动到引导行的中间？

3 个答案: