Question

在下面的codepen中，我试图让它看起来像各种尺寸的附加图像。有两件事情不正常 - 在第一行中有数字，绿色数字是当天的价格变化和变化百分比（页面上唯一的绿色文字）。在较大的浏览器尺寸下，它们分散得太多了。有没有办法强迫他们在各种规模上保持彼此相邻？

我也很难弄清楚如何使内联形式的文本输入字段占据该行的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>

Answer 1

尝试从true和col-md-2 div中删除课程changePercent。这是jsfiddle.net/8uwbwapp/1

的jsfiddle

Answer 2

我修复了你们的两个变化。请参阅下面我在codepen中所做的更改：

＆＃13;

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();
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

定位元素Bootstrap 3

2 个答案: