Align controls with bootstrap

Navigation
-1

I have this view 

@{
    ViewBag.Title = "ExcelFinancing";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style>
        .embaixo {
            position: absolute;
            left: 0;
            bottom: 20%;
            width: auto;
            bottom: auto;
            top: 50%;
            margin: 10%,10%,10%,10%;
        }

        radio .btn,
        .radio-inline .btn {
            padding-left: 2em;
            min-width: 7em;
        }



        .radio label,
        .radio-inline label {
            text-align: left;
        }

    </style>
</head>
<body>
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header fa-align-center">@ViewBag.TitlePage</h3>
        </div>
    </div>

    @*<div class="panel panel-default">*@

    @using (Html.BeginForm("geraExcel1", "FinancingReport", FormMethod.Post))
    {
        <div class="form-group">

            <div class="col-md-1">
                @Html.Label("De")
            </div>

            <div class="col-md-3">
                @Html.EditorFor(model => model.dataIni, new { htmlAttributes = new { @class = "form-control", ID = "dataIni" } })
                @Html.ValidationMessageFor(model => model.dataIni, "", new { @class = "text-danger" })
            </div>

            <div class="col-md-1">
                @Html.Label("Até")
            </div>
            <div class="col-md-3">
                @Html.EditorFor(model => model.dataFim, new { htmlAttributes = new { @class = "form-control", ID = "dataFim" } })
                @Html.ValidationMessageFor(model => model.dataFim, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="well well-sm col-md-10">

            <div class="form-group">
                <div class="radio">
                    <label class="btn btn-default">
                        @Html.RadioButton("gender", "Male", true, new { id = "IsMale", name="status", value="Todos" })
                        Todos
                    </label>
                </div>
            </div>

            <div class="form-group">
                <div class="radio">
                    <label class="btn btn-default">
                        @Html.RadioButton("gender", "Female", new { id = "IsFemale", name = "status", value = "Ativo" })
                        Ativo
                    </label>
                </div>
            </div>

            <div class="form-group">
                <div class="radio">
                    <label class="btn btn-default">
                        @Html.RadioButton("gender", "Female", new { id = "IsFemale", name = "status", value = "Inativo" })
                        Inativo
                    </label>
                </div>
            </div>
        </div>

       <div class="form-group">
        <div class="input-group-btn">
            <input type="submit" value="Gerar Relatório" class="btn btn-primary" />
        </div>
       </div>

            }

    </body>
</html>

I've changed the view's code for this code. The whole point is this: 1) The submit button is getting on top of the radiobuttons and next to the calendars.

2) Radiobuttons are not moving between calendars.

See the screenshot below

    
asked by anonymous 18.09.2018 / 21:41

1 answer

1

To use Bootsrap Grid you should follow some rules of the documentation as you can see here: link If you do not follow the "manual" there is no way for your Grid to be right ...

Note that you should need a .container to encompass content, and then you need to separate your content groups into .ROW s which in turn must be within your col-md-* columns so you do not have problems of responsiveness afterwards.

Adjusting these details in Grid your layout will stay as expected and as you can see below. 

.embaixo {
    position: absolute;
    left: 0;
    bottom: 20%;
    width: auto;
    /* bottom: auto; */
    top: 50%;
    margin: 10%,10%,10%,10%;
}

.radio .btn,
.radio-inline .btn {
    padding-left: 2em;
    min-width: 7em;
}



.radio label,
.radio-inline label {
    text-align: left;
}
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <div class="container">

        <div class="row">
            <div class="col-lg-12">
                <h3 class="page-header fa-align-center">@ViewBag.TitlePage</h3>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">

                    @using (Html.BeginForm("geraExcel1", "FinancingReport", FormMethod.Post))
                    {
                    <div class="form-group">

                        <div class="col-md-1">
                            @Html.Label("De")
                        </div>

                        <div class="col-md-3">
                            <input type="date" name="" id="">
                        </div>

                        <div class="col-md-1">
                            @Html.Label("Até")
                        </div>
                        <div class="col-md-3">
                            <input type="date" name="" id="">
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="well well-sm col-md-10">
                <div class="form-group">
                    <div class="radio">
                        <label class="btn btn-default">
                            @Html.RadioButton("gender", "Male", true, new { id = "IsMale", name="status",
                            value="Todos"
                            })
                            Todos
                        </label>
                    </div>
                </div>

                <div class="form-group">
                    <div class="radio">
                        <label class="btn btn-default">
                            @Html.RadioButton("gender", "Female", new { id = "IsFemale", name = "status", value =
                            "Ativo" })
                            Ativo
                        </label>
                    </div>
                </div>

                <div class="form-group">
                    <div class="radio">
                        <label class="btn btn-default">
                            @Html.RadioButton("gender", "Female", new { id = "IsFemale", name = "status", value =
                            "Inativo" })
                            Inativo
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="form-group">
                    <div class="input-group-btn">
                        <input type="submit" value="Gerar Relatório" class="btn btn-primary" />
                    </div>
                </div>
            </div>
        </div>

    </div>
    
19.09.2018 / 15:50
Separate fixed headphones from furniture to add ninth digit Doubt about button / button