Позиционирующие элементы Bootstrap 3

В кодедере ниже я пытаюсь сделать его похожим на прикрепленное изображение всех размеров. Две вещи работают неправильно - в первой строке с номерами зеленые цифры - это изменение цены дня и изменение процента (единственный зеленый текст на странице). При большом размере браузера они слишком много дрейфуют. Есть ли способ заставить их оставаться рядом друг с другом во всех размерах?Позиционирующие элементы Bootstrap 3

У меня также возникли трудности с выяснением того, как сделать поле ввода текста inline-формы всегда занимать 50% этой строки, а кнопка «Получить новую статью» всегда занимает 50% при всех размерах - например, в прикрепленном изображении.

Image of how it should look at all sizes CodePen Link

<head> 
    <title>Stock Quotes</title> 
    <meta charset='utf-8' /> 
    <meta name='viewport' content='"width=device-width, initial-scale=1'> 
</head> 

<body> 
    <div class='container'> 
    <div class='row'> 
     <div id='quote-module' class='col-md-12'> 
     <h1></h1> 
     </div> 
    </div> 
    <div class='col-md-*'> 
     <hr id='hruleFat' /> 
    </div> 
    <div class='row'> 
     <div class='col-md-12 pull-left' id='companyName'></div> 
    </div> 
    <div id='prices' class='row'> 
     <div id='lastPrice' class='col-md-8 pull-left'></div> 
     <div id='changes'> 
     <div id='changePercent' class='col-md-2 pull-right'></div> 
     <div id='change' class='col-md-2 pull-right'></div> 
     </div> 
    </div> 
    <hr> 
    <div id='range'> 
     <p class='pull-right'></p>Range</div> 
    <hr> 
    <div id='open'> 
     <p class='pull-right'></p>Open</div> 
    <hr> 
    <div id='volume'> 
     <p class='pull-right'></p>Volume</div> 
    <hr> 
    <div id='marketCap'> 
     <p class='pull-right'></p>Market Cap</div> 
    <hr> 
    <div class='row'> 
     <div id='time' class='col-md-* pull-right'></div> 
    </div> 
    <hr> 
    <div id='getQuoteForm'> 
     <form class='form-inline col-md-*' id='getQuote'> 
     <div class="form-group"> 
      <input type='text' class='form-control' id='symbolInput'> 
     </div> 
     <button type='submit' class='btn btn-default col-md-* '>Get New Quote</button> 
    </div> 
    </form> 
    </div> 
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script> 
    <link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css' /> 
    <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script> 
    </div> 
</body> 

</html>

источник

2015-06-05 Michael Kaufman

просто удалите класс col-md-2 из changePercent и измените div. проверьте это http://jsfiddle.net/8uwbwapp/ – Sushil

Ох - это отлично работает. Я был под впечатлением вещей всегда нужно добавить до 12. Как насчет поля ввода и кнопки часть моего вопроса. Сможете ли вы помочь с этим? Спасибо! –

О, я не видел вторую половину вопроса. позвольте мне посмотреть, что я могу с этим сделать. – Sushil

попробуйте удалить класс col-md-2 из changePercent и change Див-х годов. вот jsfiddle для этого jsfiddle.net/8uwbwapp/1

источник

2015-06-08 15:58:57 Sushil

Я установил ваши оба изменения. Пожалуйста, смотрите ниже изменения, которые я сделал в codepen:

function fireAjax(url) { 
 

 
    $.ajax({ 
 
    dataType: 'jsonp', 
 
    url: url, 
 
    success: function(data) { 
 
     $('h1').html(data.Name); 
 
     $('.container #companyName').html(data.Name); 
 
     $('#lastPrice').html(data.LastPrice.toFixed(2)); 
 
     $('#change').html(data.Change.toFixed(2)); 
 
     $('#changePercent').html("(" + data.ChangePercent.toFixed(2) + "%)"); 
 
     $('#range p').html(data.Low + '-' + data.High); 
 
     $('#open p').html(data.Open.toFixed(2)); 
 
     $('#volume p').html(Math.round(data.Volume/100000)); 
 
     $('#marketCap p').html(Math.round(data.MarketCap/1000000000)); 
 

 
     var vol = data.Volume.toString(); 
 
     if (vol > 6) { 
 
     $('#volume p').append('M'); 
 
     } 
 

 
     var cap = data.Volume.toString(); 
 
     if (cap > 7) { 
 
     $('#marketCap p').append('B') 
 
     } 
 

 
     var date = new Date(); 
 
     var hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours(); 
 
     var am_pm = date.getHours() >= 12 ? "PM" : "AM"; 
 
     var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); 
 
     var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); 
 
     time = hours + ":" + minutes + ":" + seconds + " " + am_pm; 
 
     $('#time').html('As of ' + time); 
 

 
    } 
 
    }) 
 
} 
 

 
fireAjax('http://dev.markitondemand.com/Api/v2/Quote/jsonp?symbol=AAPL') 
 

 
$("#getQuote").submit(function(event) { 
 
    var newURL = 'http://dev.markitondemand.com/Api/v2/Quote/jsonp?symbol=' + $('#symbolInput').val(); 
 
    console.log(newURL); 
 
    fireAjax(newURL); 
 
    event.preventDefault(); 
 
});

#quote-module { 
 
    border:1px dotted #888; 
 
    background:#EEE; 
 
    min-height:200px; 
 
} 
 

 
#hruleFat { 
 
    top:10px; 
 
    background-color: grey; 
 
    height: 5px; 
 
} 
 

 
#prices { 
 
    padding-top:25px; 
 
    font-family: "Times New Roman", Georgia, Serif; 
 
    font-size:18px; 
 
} 
 

 
#change { 
 
    color: green; 
 
} 
 
#changePercent{ 
 
    color: green; 
 
} 
 

 
#range { 
 
    color: #999; 
 
    font-weight: bold; 
 
} 
 
#open { 
 
    color: #999; 
 
    font-weight: bold; 
 
} 
 

 
#volume { 
 
    color: #999; 
 
    font-weight: bold; 
 
} 
 

 
#marketCap { 
 
    color:#999; 
 
    font-weight: bold; 
 
} 
 

 
#range p{ 
 
    color: black; 
 
} 
 
#open p { 
 
    color: black; 
 
} 
 

 
#volume p { 
 
    color: black; 
 
} 
 

 

 
#marketCap p{ 
 
    color: black; 
 
} 
 

 
#time { 
 
    font-size: 12px; 
 
    color:#999; 
 
} 
 

 

 
#companyName { 
 
    max-width:20px; 
 
    font-family: "Times New Roman", Georgia, Serif; 
 
    text-transform: uppercase; 
 
    color:#666; 
 
}

<div class='container'> 
 
    <div class='row'> 
 
     <div id='quote-module' class='col-md-12'> 
 
      <h1></h1> 
 

 
     </div> 
 
    </div> 
 
    <div class='col-md-*'> 
 
     <hr id='hruleFat' /> 
 
    </div> 
 
    <div class='row'> 
 
     <div class='col-md-12 pull-left' id='companyName'></div> 
 
    </div> 
 
    <div id='prices' class='row'> 
 
     <div id='lastPrice' class='col-xs-8'></div> 
 
     <div id='changes' class="col-xs-4"> 
 
      <div id='changePercent' class=' pull-right'></div> 
 
      <div id='change' class='pull-right'></div> 
 
     </div> 
 
    </div> 
 
    <hr> 
 
    <div id='range'> 
 
     <p class='pull-right'></p>Range</div> 
 
    <hr> 
 
    <div id='open'> 
 
     <p class='pull-right'></p>Open</div> 
 
    <hr> 
 
    <div id='volume'> 
 
     <p class='pull-right'></p>Volume</div> 
 
    <hr> 
 
    <div id='marketCap'> 
 
     <p class='pull-right'></p>Market Cap</div> 
 
    <hr> 
 
    <div class='row'> 
 
     <div id='time' class='col-md-* pull-right'></div> 
 
    </div> 
 
    <hr> 
 
    <div id='getQuoteForm'> 
 
     <form class='form-inline col-md-*' id='getQuote'> 
 
      <div class="row"> 
 
       <div class="col-xs-6"> 
 
        <input type='text' class='form-control' id='symbolInput' style="width:100%"> 
 
       </div> 
 
       <div class="col-xs-6"> 
 
        <button type='submit' class='btn btn-default col-xs-12'>Get New Quote</button> 
 
       </div> 
 
      </div> 
 
     </form> 
 
    </div> 
 
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script> 
 
    <link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css' /> 
 
    <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script> 
 
</div>

источник

2015-06-06 13:07:38

Позиционирующие элементы Bootstrap 3

ответ

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