Question

我需要在center以及left方面获取文字。如果有人可以帮助我纠正我出错的错误？

图示方式更精确。

正在运行fiddle

此处的HTML：

<div class="container" id="values">
  <div class="row">
    <div class="header col-md-10 col-md-offset-1">
      <div class="center-block" style='background:yellow'>
        <div class="text-center">
          <div id="main-text">
            <h3>TEXT</h3>
          </div>

          <div class="side_section">
            <div id="text2" class="pull-right clearfix" style='background:blue'>
              Text2
            </div>

            <div id="text1" class="pull-right clearfix" style='background:blue'>
              Text1
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

我认为这是你正在寻找的东西。第一行演示在同一行上具有左对齐，居中对齐和右对齐文本。第二行演示只有中心和右边的网格偏移。

在Bootstrap中使用网格（因为我在示例代码中看到它）是实现此效果的一种方法，但也有其他方法。如果您不使用框架，则可以直接使用CSS浮动。

＆＃13;

<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.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">

  <!-- Example 1 -->
  <div class="row">
    <div class="col-xs-4 text-left">
      <p>left text</p>
    </div>
    <div class="col-xs-4 text-center">
      <p>center text</p>
    </div>
    <div class="col-xs-4 text-right">
      <p>right text</p>
    </div>
  </div>

  <!-- Example 2 -->
  <div class="row">
    <div class="col-xs-4 col-xs-offset-4 text-center">
      <p>center text</p>
    </div>
    <div class="col-xs-4 text-right">
      <p>right text</p>
    </div>
  </div>

  <!-- Example 3 -->
  <div class="row">
    <div class="col-xs-4 col-xs-offset-4 text-center">
      <p>center text</p>
    </div>
    <div class="col-xs-4 text-right">
      <span>right 1</span>
      <span>right 2</span>
    </div>
  </div>

  <!-- Example 4 -->
  <div class="row">
    <div class="col-xs-4 col-xs-offset-4 text-center">
      <p>center text</p>
    </div>
    <div class="col-xs-4 text-right">
      <p style="display: inline;">right 1</p>
      <p style="display: inline;">right 2</p>
    </div>
  </div>

  <!-- Example 5 -->
  <div class="row">
    <div class="col-xs-4 col-xs-offset-4 text-center">
      <p>center text</p>
    </div>
    <div class="col-xs-4 text-right">
      <p class="pull-right">right 2</p>
      <p class="pull-right">right 1</p>
    </div>
  </div>

</div>

＆＃13;

旁注：我只使用了xs-*网格类，因为Stack Overflow片段在如此小的窗口中呈现。该概念与md-*或与您的设计最佳的概率相同。

Answer 2

添加此样式：

.side_section{
    position: absolute;
    top: 0px;
    right: 20px;
}

https://jsfiddle.net/gueqvxua/2/

Answer 3

#values {
  background: #eee;
}

#values .col-md-10 {
  background: #ddd;
}

#values h3 {
  background: #ccc;
}

#values .list-inline {
  padding: 25px;
  margin: 0;
  background: #bbb;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" id="values">
  <div class="row">
    <div class="col-md-12">
      <ul class="list-inline pull-right text-right">
        <li><a href="">Test</a></li>
        <li><a href="">Test</a></li>
      </ul>

      <h3 class="text-center">TEXT</h3>
       
    </div>
  </div>
</div>

StackOverflow上的一些CSS似乎会产生对齐问题，但是如果你使用相同的代码（http://www.bootply.com/E8fPPsaz25）引用一个Bootply示例，你会发现一切都很顺利。

居中且右对齐的文本未在同一行上呈现

3 个答案: