Question

我的代码如下。我想在左侧和中间之间修复

标签的内容。我试过解决这个问题。我可以把它修复到左边。但它并不局限于中心，如果我们添加更多内容，它就会偏离中心。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div>
    <p class="position-fixed pull-left"><bold>Hello</bold><br/>This is to test the code and make sure that the and make sure that the code is working fine </p>
    <button type="button" class="btn btn-primary pull-right">Apple1</button><br/><br/>
    <button type="button" class="btn btn-primary pull-right">Apple2</button><br/><br/>
    <button type="button" class="btn btn-primary pull-right">Apple3</button><br/><br/>
    <button type="button" class="btn btn-primary pull-right">Apple4</button><br/><br/>
  </div>
</div>

</body>
</html>

所需的输出如下所示。

         Welcome to my small webpage
Hello
This is to test the code              [button1]
and make sure that the                [button2]
code is working fine.                 [button3]
                                      [button4]
                                      [button5]
                                      [button6]

我得到的输出如下所示。

         Welcome to my small webpage
Hello
This is to test the code and make sure that the and make sure that the                          
code is working fine.                                [button1]
                                            [button2][button4]
                                          [button3]        
                                                     [button5]
                                                     [button6]

Answer 1

您应该检查Bootstrap网格行为，在容器内需要有三列的行：

<div class="container">
    <div class="row">
        <div class="col-4">Text list</div>
        <div class="col-4">Buttons list</div>
        <div class="col-4">[Empty]</div>
    </div>
</div>

最后一列将为空，或者您将该类添加到行justify-content-start，以便对齐方式位于左侧。

您需要为要显示的每一行编写一个标记row（在同一容器内）。

Answer 2

您需要花一些时间学习自举网格，以便做您想做的事情。对于您的解决方案，我有以下代码：

<div class="container">
  <div class="row">
    <div class="col-lg-4"><p>Your paragraph goes here</p></div>
    <div class="col-lg-4">empty space between paragraph and buttons</div>
    <div class="col-lg-4">
      <div class="row">
        <div class="col-lg-12">button 1</div>
      </div>
      <div class="row">
        <div class="col-lg-12">button 2</div>
      </div>
      <div class="row">
        <div class="col-lg-12">button 3 etc...</div>
      </div>
    </div>
  </div>
</div>

您还应该注意到lg属性中的col-指的是大屏幕分辨率。对于中小型和x小型分辨率（中型台式机，平板电脑，手机），您应该使用col-md-，col-sm-，col-xs-等。您还可以使用多个列类您的div即class="col-lg-6 col-md-6 col-xs-6"。首先要做的事情：阅读有关Bootstrap网格的所有信息。

如何使用bootstrap在div中从左到中固定文本的位置

2 个答案: