Как отображать встроенный с svg и текстом - PullRequest
Новая
       20

Как отображать встроенный с svg и текстом

1 голос
/ 19 июня 2020

У меня есть следующий фрагмент: 

#reply{
background: lightgray;
}

#inline_txt_svg{
  display: inline-block; 
  max-width: 50px; 
  margin-top: 15px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
   <div class="col-md-6">
      <div id="reply" class="col-md-12">
         <div class="row">
            <div class="col-md-2">
               <div id="inline_txt_svg">
                  <img src="https://image.flaticon.com/icons/svg/848/848043.svg">
                  18/06/2020 (15:46)
               </div>
            </div>
            <div class="col-md-10">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore </p>
               <p>et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
               </p>
               <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
               </p>
               <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-6"></div>
</div>

Я хочу, чтобы текст и svg находились в одной строке.

Примерно так:

enter image description here

Ответы [ 2 ]

0 голосов
/ 19 июня 2020

вы можете использовать этот код, он работает! 

        <div class="container">
        <div class="row">
            <div class="col-sm-6" id="reply">
                <div class="row">
                    <div class="col-sm-2" id="inline_txt_svg">
                     <img src="https://image.flaticon.com/icons/svg/848/848043.svg">

                    </div>
                    <div class="col-sm-10">
                    <p>18/06/2020 (15:46)</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore </p>
           <p>et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
           </p>
           <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
           </p>
           <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6"></div>
        </div>
    </div>
0 голосов
/ 19 июня 2020

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

Примечание: я изменил col-md tot xs, чтобы он стал видимым во фрагменте кода, вы можете изменить это обратно. 

#reply {
  background: lightgray;
  padding: 15px 0;
}

#inline_txt_svg {
  display: block;
}

#inline_txt_svg img {
  max-width: 50px;
}

time {
  display: inline-block;
  padding: 15px 0 15px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row" id="reply">
    
    <div class="col-xs-2 text-center">
      <div id="inline_txt_svg">
        <img src="https://image.flaticon.com/icons/svg/848/848043.svg" alt="profile-image">
      </div>
    </div>
    
    <div class="col-xs-10">
      <time class="">18/06/2020 (15:46)</time>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore </p>
      <p>et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
               </p>
               <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>
...