начальной загрузки колонки, чтобы соответствовать ширине

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

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

 <!--===================DEMOS ==================--> 

    <div class="row"> 
     <div class="col-sm-12 col-md-12 col-lg-12 container-nopads" style=""> 

      <div class="col-sm-2 col-md-2 col-lg-2 " > 
       <div class="demo-box col-sm-12 col-xs-12" id="demo-pdf"> 
        <a href="/versebuster2/eplay/eplay-demo.php" style="text-decoration:none;"> 
         <h4><strong>ePlay Demo</strong></h4><br><br><br> 
         <img src="images/hovers/pdf-512.png" > 
        </a> 
       </div> 
      </div> 

      <div class="col-xs-1 col-sm-1 col-lg-1 col-md-1 container-nopads" style=""> 
       <img src="images/arrow-right.png" class="img-responsive" > 
      </div>    

      <div class="col-sm-2 col-md-2 col-lg-2 " > 
       <div class="demo-box col-sm-12 col-xs-12" id="demo-doc"> 
        <h4><strong>Theatre Script Demo</strong></h4><br><br> 
        <img src="images/hovers/doc-512.png" class=""> 
       </div> 
      </div> 

      <div class="col-xs-1 col-sm-1 col-lg-1 col-md-1 container-nopads" style=""> 
       <img src="images/arrow-right.png" class="img-responsive" > 
      </div>    

      <div class="col-sm-2 col-md-2 col-lg-2 " > 
       <div class="demo-box col-sm-12 col-xs-12" id="demo-mp3"> 
        <h4><strong>Audio Speech Demo</strong></h4><br><br> 
        <img src="images/hovers/mp3-512.png" class=""> 
       </div> 
      </div> 

      <div class="col-xs-1 col-sm-1 col-lg-1 col-md-1 container-nopads" style=""> 
       <img src="images/arrow-right.png" class="img-responsive" > 
      </div>    

      <div class="col-sm-2 col-md-2 col-lg-2 " > 
       <div class="demo-box col-sm-12 col-xs-12" id="demo-pdf"> 
        <a href="data/pdf/ePlayPPPDemo.pdf" target="_blank" style="text-decoration:none; "> 
         <h4><strong>Slide Show Demo</strong></h4><br><br><br> 
         <img src="images/hovers/pdf-512.png" class=""> 
        </a> 
       </div> 
      </div> 

     </div> 
    </div> 
    <!--===================END DEMOS ==================-->

источник

2015-08-19 propaganja

вы можете просто использовать 'col-md-3' и использовать' :: after' для стрелки-img, что будет проще для вас. – vivekkupadhyay

использовать 'row-fluid' вместо простого класса' row' –

@vivekkupadhyay Я попытался использовать :: after, но изображение падает во второй строке. – propaganja

Используйте .col-md-3 класс для этого случая:

.col-md-3 .inner {margin: 5px; background: #99f; text-align: center;}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<div class="row-fluid"> 
 
    <div class="container-fluid"> 
 
    <div class="col-md-3"> 
 
     <div class="inner">One</div> 
 
    </div> 
 
    <div class="col-md-3"> 
 
     <div class="inner">Two</div> 
 
    </div> 
 
    <div class="col-md-3"> 
 
     <div class="inner">Three</div> 
 
    </div> 
 
    <div class="col-md-3"> 
 
     <div class="inner">Four</div> 
 
    </div> 
 
    </div> 
 
</div>

Preview:

источник

2015-08-19 13:03:12

Да, это хороший ответ, но на левой стороне и в самой правой части я хочу, чтобы он был торчащим, а на каждой стороне не было отступов или полей. – propaganja

Вам не нужны промежутки между ними? Дайте отрицательный запас! –

@propaganja Это ваше исправление: '.col-md-3 .inner {margin: 5px -15px;}' –

начальной загрузки колонки, чтобы соответствовать ширине

ответ

Смежные вопросы