Bootstrap Сетка не работает с изображением и таблицей в виде столбца - PullRequest
Новая
       5

Bootstrap Сетка не работает с изображением и таблицей в виде столбца

0 голосов
/ 13 июля 2020

У меня особая c проблема с сеткой Bootstrap, и я надеюсь, что вы можете мне помочь. В настоящее время я работаю над aspx-файлом, в котором я хочу иметь изображение слева и таблицу справа.

this is the wanted behavior

My problem right now is, that it doesn't appear from left to right but from up to bottom.

this is the unwanted behavior

here is my code from the aspx-file:

Ответы [ 3 ]

1 голос
/ 14 июля 2020

Этот макет может вам помочь. 

<!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/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container">
  <div class="row">
    <div class="col 6">
        <button style="width:100px">a</button> 
        <button style="width:100px">b</button> 
    </div>
    <div class="col 6">
        <h3>Fancy Application</h3>
    </div>
  </div>
   <div class="row">
      <div class="col 6" style="background-color:blue;height:100px;width:100px">
         <img src="https://lh3.googleusercontent.com/-8T5K3BCEE0k/XLQsGob2TUI/AAAAAAAAFv0/-OiwdGTwoOQLlQN__xp5rHj3BQb767SHQCLcBGAs/h110/Logo%2BAgung%2BPanduan.png" alt="Girl in a jacket" width="500" height="100">
      </div>
      <div class="col 6" style="background-color:red;height:100px;width:100px">
         <table></table>
      </div>
  </div>
</div>

</body>
</html>
0 голосов
/ 13 июля 2020

Максимальный столбец в строке bootstrap равен 12, из вашего кода вы используете «col-lg-10» и еще один «col-lg-10», браузер автоматически переместит второй столбец в другая строка, потому что «10 + 10» = 20. уменьшите значение «col-lg-10» до col-lg-6 как для столбца изображения, так и для столбца таблицы, чтобы получилось 12 столбцов в строке. вы также можете добавить «col-6», чтобы оба оставались в одной строке даже на небольших экранах, хотя это могло бы выглядеть странно и немного неуклюже, но размещение всего в одной строке на маленьком экране.

0 голосов
/ 13 июля 2020

Этот макет может вам помочь. Если вы используете большой монитор, измените col-md-6 на col-6 или col-lg-6. 

<div class="container">
        <div class = "row col-12">
            <div class= col-md-6>
                <div class="col-4">
                    <button></button> 
                    <button></button> 
                </div>
                <img>
            </div>
            <div class= col-md-6>
                <p>Fancy Applicatiopn</p>
                <table></table>
            </div>
        </div>
    </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...