2016-11-23 1 views
0

Мой HTML выглядит следующим образом:Bootstrap тянуть налево и выдвижная право не отвечать на запросы

<div class="thumbnail news-listing"> 
     <div> 
     <img class="img-responsive fr-draggable" src="/CustomContents/DSC03804.JPG"> 
     </div> 
     <div class="caption"> 
      <h4 class="">Test Article</h4> 

      <p class=""> 
     </p><p>Test News</p><p></p> 
      <p></p> 
      <div class="btn-block"> 
       <div class="pull-left"> 

        <a href="/News/Test-Article" class="btn btn-default btn-xs pull-left" role="button">More Info</a> 
       </div> 

       <div class="pull-right"> 

        <a style="cursor:pointer" class="btn btn-default btn-xs" role="button"><i class="glyphicon glyphicon-calendar"></i>18/11/2016</a> 

       </div> 
      </div> 
      </div> 
    </div> 

Я хотел бы две ссылки в нижней части, чтобы ответить собирается один под другим, если не хватает места, но вместо того, чтобы они выглядят так. что я делаю неправильно?

enter image description here

+0

Почему вы не играете с сеткой? – Troyer

+0

Потому что я хотел, чтобы кнопки находились в левом и правом углах, насколько это возможно друг от друга. – Vax

+0

Комбинированная ширина двух элементов выше, чем ширина вашего порта просмотра, поэтому вы не можете ставить их бок о бок. Вам нужно будет сделать их короче (опустите отступы/шрифт). – Dekel

ответ

-1

Если он не работает, то TRY, как показано ниже,

<div style='float:left'> 

вместо <div class='pull-left'> и

<div class='float:right'> 

вместо <div class='pull-right'> corrosponding

+0

Это поражает всю цель использования бутстрапа! Кроме того, класс 'pull-left' просто плавает влево ...! – Stuart

+0

Я знаю, что pull-left = float: left –

+0

Тогда какова точка замены классов для встроенных стилей, которые делают то же самое ...?!? – Stuart

0

Либо использовать бутстрэпами сетку, так что вы можете установить два столбцы ИЛИ изменить порядок элементов так, чтобы pull-right один был до pull-left один в источнике.

<div class="thumbnail news-listing"> 
    <div><img class="img-responsive fr-draggable" src="/CustomContents/DSC03804.JPG" alt="" /></div> 
    <div class="caption"> 
     <h4 class="">Test Article</h4> 
     <p class="">&nbsp;</p> 
     <p>Test News</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <div class="btn-block"> 
      <div class="pull-right"><a class="btn btn-default btn-xs" style="cursor: pointer;">18/11/2016</a></div> 
      <div class="pull-left"><a class="btn btn-default btn-xs pull-left" href="/News/Test-Article">More Info</a></div> 
     </div> 
    </div> 
</div> 
Смежные вопросы