Bootstrap 3 кнопки horzontal вопросы выравнивания в строке

Я пытаюсь разместить 5 кнопок в строке. если я использую «col-lg-3», макет становится слишком большим, если я пытаюсь использовать col-lg-2, моя пятая кнопка обертывается. Как этого избежать? Каков наилучший способ справиться с проблемами выравнивания в таких случаях, когда, если вы выходите на более высокий номер, вы получаете больше места, и если вы уменьшите свой номер в col-lg-xx, вы получите меньше места? Ниже приведен кодBootstrap 3 кнопки horzontal вопросы выравнивания в строке

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Calculator</title> 
<link href="Content/theme/bootstrap-theme-slate.min.css" rel="stylesheet" /> 
<style> 
    #calculator{ 
    border:2px solid red ; 
    margin-top:5%; 
    } 
</style> 
</head> 
<body> 
<div id="container"> 
    <div class="row"> 
      <div id="calculator" class="col-lg-3 col-lg-offset-3"> 
       <div class="row"> 
        <input class="form-control" type="text" name="result" value="" /> 
       </div> 
       <div class="row"> 
        <button type="button" class="btn btn-default">MC</button> 
        <button type="button" class="btn btn-default">MR</button> 
        <button type="button" class="btn btn-default">MS</button> 
        <button type="button" class="btn btn-default">M+</button> 
        <button type="button" class="btn btn-default">M-</button> 
       </div> 
      </div> 
    </div> 

</div> 
</body> 
</html>

источник

2014-02-12 ATHER

Как вы уже добавили .row класс на кнопки контейнера, используйте .col-xx классов по кнопкам, чтобы получить полную проконтролировано кнопку сетки:

<div id="container"> 
    <div class="row"> 
    <div id="calculator" class="col-lg-3 col-lg-offset-3"> 
     <div class="row"> 
     <input class="form-control" type="text" name="result" value="" /> 
     </div> 
     <div class="row"> 
     <button type="button" class="col-lg-2 col-lg-offset-1 btn btn-default">MC</button> 
     <button type="button" class="col-lg-2 btn btn-default">MR</button> 
     <button type="button" class="col-lg-2 btn btn-default">MS</button> 
     <button type="button" class="col-lg-2 btn btn-default">M+</button> 
     <button type="button" class="col-lg-2 btn btn-default">M-</button> 
     </div> 
    </div> 
    </div> 
</div>

источник

2014-02-12 08:57:01 zessx

Это именно тот вид решение, которое я искал. Спасибо. Это сработало – ATHER

Добро пожаловать. Не стесняйтесь задавать этот ответ как «принятый» (вы можете сделать то же самое для своих других вопросов). – zessx

Несомненно. Просто сделал это. Извините, так как я вроде как новый, отправляя свой вопрос в stackoverflow, я все еще пытаюсь воспользоваться этим. Пробовал проголосовать за ваш ответ, но поскольку у меня недостаточно репутации, я не могу этого сделать :) – ATHER

Bootstrap 3 кнопки horzontal вопросы выравнивания в строке

ответ

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