레몬블루
270
2015-08-14 22:08:44
3
3165

CSS로 버튼을 정렬하고 싶습니다




빨간선 안쪽으로 들어가게 만들고싶은데... 그러면 자동으로
버튼들이 크기가 바뀌어야할거같은데... width를 조절하면 버튼이 아래로 내려가고

난리가 나더군요. 어떻게 해야하나요?



0
  • 답변 3

  • 초보람보
    622
    2015-08-14 22:43:26

    화면 크기가 변해도 저 버튼들이 좌측 사이드바 안에 있게 되는 걸 원하시는 건가요?

    bootstrap 사용하고 계시고 있고 그렇다면 bootstap grid 시스템을 사용하시면 될 것 같은데...

    bootstrap grid 시스템을 참 독창적인 방법으로 사용하시던데.. ^^

    아래 한글로 번역된 bootstrap 사이트를 보시면서 grid 
    시스템을 정복해 보세요.

    http://bootstrapk.com/css/#grid


    <!DOCTYPE html>
    <html >
    <head>
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <meta name="robots" content="noindex">
    <title>CodePen - Button Width</title>
    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
    <style>
    body {
    	font-family: Calibri, Sans-Serif;
    	padding:0;
    }
    
    #sidebar {
    	position: fixed;
    	z-index: 10;
    	left: 0;
    	top: 0;
    	background-color: grey;
    	height: 100%;
    	min-width: 18em;
    }
    
    main {
    	padding: 0;
    	margin-left: 18em;
    }
    </style>
    
    <script>
    	window.console = window.console || function(t) {};
    </script>
    </head>
    
    <body class="container">
    	<div id="sidebar" class="col-sm-2 navbar navbar-nav text-center">
    		<h3>BootStrap</h3>
    		<div class="row">
    			<button class="btn btn-default btn-xs col-xs-2 col-xs-offset-1">Tester</button>
    			<button class="btn btn-default btn-xs col-xs-2">Tester</button>
    			<button class="btn btn-default btn-xs col-xs-2">Tester</button>
    			<button class="btn btn-default btn-xs col-xs-2">Tester</button>
    			<button class="btn btn-default btn-xs col-xs-2">Tester</button>
    		</div>
    		<div class="row" style="margin-top:10px">
    			<button class="btn btn-default btn-sm col-xs-3">Tester</button>
    			<button class="btn btn-default btn-sm col-xs-3">Tester</button>
    			<button class="btn btn-default btn-sm col-xs-3">Tester</button>
    			<button class="btn btn-default btn-sm col-xs-3">Test</button>
    		</div>
    		<div class="row" style="margin-top:10px">
    			<button class="btn btn-default btn-sm col-xs-3">Tester</button>
    			<button class="btn btn-default btn-sm col-xs-3">Test</button>
    			<button class="btn btn-default btn-sm col-xs-3">Test</button>
    			<button class="btn btn-default btn-sm col-xs-3">Test</button>
    		</div>
    	</div>
    
    	<main class="col-sm-10">
    		<div class="jumbotron text-center">
    			<h2>Title</h2>
    		</div>
    	</main>
    
    	<script>
    		if (document.location.search.match(/type=embed/gi)) {
    			window.parent.postMessage("resize", "*");
    		}
    	</script>
    </body>
    </html>








  • 레몬블루
    270
    2015-08-14 23:22:21
    감사합니다! 많은 도움이 되었습니다


  • visualkhh
    3k
    2015-08-16 12:11:57

    @레몬블루  // 여기좋은 강좌있습니다.

    https://www.youtube.com/watch?v=sTi_hcaBmsg&list=PLdajQmV2DgoSN5_-w06dk9P3pCZq1Qsw8

  • 로그인을 하시면 답변 을 등록할 수 있습니다.