Question

.col-md-4 {
  text-align:center
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

<div class="container">
    <div class="row">
        <div class="col-md-4">

            <p>
                Test
            </p>
            <p>
                Testttttttttttttt
            </p>


        </div>
    </div>

</div>

https://jsfiddle.net/jze8gqb1/1838/

我想在一列中对齐文本项。我使用了display：inline-block但没有用。我该如何解决？谢谢。

输出

          Test
    Testttttttttttttt

所需的输出

        Test
        Testttttttttttttt

Answer 1

您可以通过使用单个p标签和white-space: pre-line来做到这一点：

.col-md-4 {
  text-align:center
}

p {
  white-space: pre-line;
  text-align: left;
  display: inline-block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <p>
        Test
        Testttttttttttttt
      </p>
    </div>
  </div>
</div>

您可以找到有关white-space属性here的更多信息。

Answer 2

将此添加到您的班级 class =“ text-left”

Answer 3

尝试一下

 <div class="container">
      <div class="row">
        <div class="col-md-4">
            <p class="text-left">
                Test
                <br>
                Testttttttttttttt
            </p>
        </div>
      </div>
    </div>

没有CSS，只需将class =“ text-left”添加到所需的p元素

如何在一列上对齐文本？

3 个答案: