как исправить положение текста слева направо в div с помощью начальной загрузки - PullRequest
Новая
       6

как исправить положение текста слева направо в div с помощью начальной загрузки

0 голосов
/ 08 мая 2018

Мой код здесь ниже. Я хочу исправить содержимое тега

между левой и центральной частями. Я попытался решить проблему. Я могу исправить это слева. Но он не ограничивается центром, если мы добавляем больше контента, он выходит из центра. 

<!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]

Ответы [ 2 ]

0 голосов
/ 08 мая 2018

Вам нужно потратить некоторое время на изучение загрузочных сеток, чтобы делать то, что вы хотите. Для вашего решения у меня есть следующий код: 

<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 in col- относится к большому разрешению экрана. Для средних, малых и x-малых разрешений (средние рабочие столы, планшеты, мобильные телефоны) вы должны использовать col-md-, col-sm-, col-xs- и т. Д. Вы также можете использовать более одного класса столбцов в вашем div, т. Е. class="col-lg-6 col-md-6 col-xs-6". Первое, что нужно сделать: прочитать все о сетках Bootstrap.

0 голосов
/ 08 мая 2018

Вы должны проверить поведение сетки 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 (внутри одного контейнера) для каждой строки, которую вы хотите показать.

...