堆棧內存溢出
  簡體   English   中英

引導行中的左，中，右三個按鈕

[英]Left, center, right three buttons in bootstrap row

 原文  2017-08-15 04:07:10  4   1    html/ css/ twitter-bootstrap-3

問題描述

我目前正在嘗試將三個按鈕居中放置在容器中。 我已經很接近了，但是我似乎無法將所有按鈕都排成一排。 我嘗試過text- [left，right，center]以及pull- [left，right]。

我包括一個骨架殼，以提供基本布局。 

<!DOCTYPE html>
<html>
    <head>
        <!-- meta -->

        <!-- refs -->
        <link rel="stylesheet" type="text/css" href="style.css">

        <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <!-- scripts -->

        <title>The title</title>
    </head>
    <body>



<!-- MASTER CONTAINER -->
<div class="container-fluid page-container">

    <!-- divide main content into three sections left, middle, right -->
    <!-- top section container -->
    <div class="row top-container">
        <!-- top section -->
        <div class="col-sm-12">

        </div>
    </div>

    <div class="row">
        <!-- LEFT CONTAINER (vertical)       -->
        <!-- left side -->
        <div class="col-sm-1">
            <button class="btn btn-default btn-block" type="button">Save Trick</button>
        </div

        <!-- right side -->
        <div class="col-sm-1">
            <button class="btn btn-default btn-block" type="button">Gold</button>
            <button class="btn btn-default btn-block" type="button">Black</button>
            <button class="btn btn-default btn-block" type="button">Blue</button>
            <button class="btn btn-default btn-block" type="button">Green</button>
            <button class="btn btn-default btn-block" type="button">White</button>
        </div>




        <div class="col-sm-8">
            <!-- MIDDLE CONTAINER (horizontal)  -->
            <div class="middle-container">
                <div class="middle-top">
                    <button class="btn btn-default" type="button">Approach</button>
                    <button class="btn btn-default" type="button">Street/Half Pipe</button>
                    <button class="btn btn-default" type="button">Coach Assisted</button>
                </div>

                <div class="middle-video">
    4
                </div>

                <div class="middle-textinput">
    5
                </div>

                <div class="middle-bottom">
    6
                </div>
            </div>
        </div>


        <!-- RIGHT CONTAINER (vertical)     -->
        <div class="col-sm-1">
            <button class="btn btn-default btn-block" type="button">Gold</button>
            <button class="btn btn-default btn-block" type="button">Black</button>
            <button class="btn btn-default btn-block" type="button">Blue</button>
            <button class="btn btn-default btn-block" type="button">Green</button>
            <button class="btn btn-default btn-block" type="button">White</button>
        </div

        <!-- right side -->
        <div class="col-sm-1">
            <button class="btn btn-default btn-block" type="button">Gold</button>
            <button class="btn btn-default btn-block" type="button">Black</button>
            <button class="btn btn-default btn-block" type="button">Blue</button>
            <button class="btn btn-default btn-block" type="button">Green</button>
            <button class="btn btn-default btn-block" type="button">White</button>
        </div>

        </div>

    </div>
</div>


    </body>
</html>

Style.css（顯示框模型） 

* {
    border: 1px solid black;
    margin: 0;
    padding: 0;
}

任何提示將非常感謝。

1 個解決方案

解決方案1
 0 已采納  2017-08-15 04:23:12

試試這個最簡單的解決方案

HTML 

<!DOCTYPE html>
<html>
    <head>
        <!-- meta -->

        <!-- refs -->
        <link rel="stylesheet" type="text/css" href="style.css">

        <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <!-- scripts -->

        <title>The title</title>
    </head>
    <body>



<!-- MASTER CONTAINER -->
<div class="container-fluid page-container">

    <!-- divide main content into three sections left, middle, right -->
    <!-- top section container -->
    <div class="row top-container">
        <!-- top section -->
        <div class="col-sm-12">

        </div>
    </div>

    <div class="row">
        <!-- LEFT CONTAINER (vertical)       -->
        <!-- left side -->
        <div class="col-sm-1">
            <button class="btn btn-default btn-block" type="button">Save Trick</button>
        </div

        <!-- right side -->
        <div class="col-sm-1">
            <button class="btn btn-default btn-block" type="button">Gold</button>
            <button class="btn btn-default btn-block" type="button">Black</button>
            <button class="btn btn-default btn-block" type="button">Blue</button>
            <button class="btn btn-default btn-block" type="button">Green</button>
            <button class="btn btn-default btn-block" type="button">White</button>
        </div>




        <div class="col-sm-8">
            <!-- MIDDLE CONTAINER (horizontal)  -->
            <div class="middle-container">
                <div class="middle-top"><center>
                    <button class="btn btn-default" type="button">Approach</button>
                    <button class="btn btn-default" type="button">Street/Half Pipe</button>
                    <button class="btn btn-default" type="button">Coach Assisted</button></center>
                </div>

                <div class="middle-video">
    4
                </div>

                <div class="middle-textinput">
    5
                </div>

                <div class="middle-bottom">
    6
                </div>
            </div>
        </div>


        <!-- RIGHT CONTAINER (vertical)     -->
        <div class="col-sm-1">
            <button class="btn btn-default btn-block" type="button">Gold</button>
            <button class="btn btn-default btn-block" type="button">Black</button>
            <button class="btn btn-default btn-block" type="button">Blue</button>
            <button class="btn btn-default btn-block" type="button">Green</button>
            <button class="btn btn-default btn-block" type="button">White</button>
        </div

        <!-- right side -->
        <div class="col-sm-1">
            <button class="btn btn-default btn-block" type="button">Gold</button>
            <button class="btn btn-default btn-block" type="button">Black</button>
            <button class="btn btn-default btn-block" type="button">Blue</button>
            <button class="btn btn-default btn-block" type="button">Green</button>
            <button class="btn btn-default btn-block" type="button">White</button>
        </div>

        </div>

    </div>
</div>


    </body>
</html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 水平對齊三個按鈕（左，中，右） 在 Bootstrap 中將按鈕向左、居中和右對齊 Bootstrap：左邊和右邊三行的行？ 帶有三個元素的導航欄（左，中，右）：在一行中移動左右元素，在中心元素下移動小？ 三 <li> ，左中和右 左，中和右定位三個div 我想在一行中保持三個div，不同寬度，一個在左邊，一個在中間，一個在右邊 如何對齊三個div（左/中/右）以進入小屏幕的左/右和在它們下方的中心元素 Bootstrap左中心/右中心對齊的導航欄項目無響應 在容器內對齊三個元素（左/中/右）
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM