Загрузочная веб-страница

#html #twitter-bootstrap #css

#HTML #twitter-bootstrap #css

Вопрос:

Это может показаться немного странным, но мне нужна помощь, на веб-странице должна быть строка, которая должна содержать три раздела, первый раздел должен иметь смещение в 1 столбец, а расстояние между разделами должно составлять 10 пикселей. до этой части все идет хорошо с использованием bootstrap.

Теперь вторая строка будет иметь 2 равных раздела, ее края должны быть выровнены с краями предыдущей строки, первый раздел будет иметь смещение в 1 столбец, а расстояние между разделами должно составлять 10 пикселей.

Моя проблема во второй строке, как я могу создать эти два раздела одинаковой ширины с расстоянием 10 пикселей между ними, а также чтобы его края были выровнены по краям предыдущей строки.

Я показываю вам картину проблемы.

Код моей первой строки:

 <div class="barra row">
        <div class="col-md-3 col-md-offset-1 col-sm-3 col-xs-3 col-xs-offset-1 colum4"></div>
        <div class="col-md-3 col-sm-3 col-xs-3 leftMargin colum4" id="a"></div>
        <div class="col-md-3 col-sm-3 col-xs-3 leftMargin colum4" id="b"></div> 
</div>

Каким будет код второй строки??

Ответ №1:

Ну, попробуйте это:

 <div class="row">
    <div class="col-xs-1"></div>
    <div class="col-xs-11">
        <div class="row">
            <div class="col-xs-4 colum4" style="margin-right:10px; width:calc(33.333% - 6.666px);"></div>
            <div class="col-xs-4 colum4" style="margin-right:10px; width:calc(33.333% - 6.666px);"></div>
            <div class="col-xs-4 colum4" style="width:calc(33.333% - 6.666px);"></div>
        </div>
        <div class="row">
            <div class="col-xs-6" style="margin-right:10px; width:calc(50% - 5px);"></div>
            <div class="col-xs-6" style=" width:calc(50% - 5px);"></div>
        </div>
    </div>
</div>

1. Но как насчет полей?, в вашем коде края выровнены, но полей нет

2. Хорошо… ну, если я вижу там свой код, вам нужно изменить процент, если вы хотите изменить количество столбцов и так далее… Но я думаю, что это единственное решение, если вы хотите использовать margin. Если вы используете отступы, вы можете изменить отступы по умолчанию (только слева и справа) столбца на 5 пикселей и изменить отступы строк (слева и справа) на -5 пикселей и просто поместить пользовательский div (ширина, цвет фона или границы) внутри каждого столбца. Таким образом, столбцы всегда имеют одинаковое расстояние, и CSS не нужно ничего вычислять

3. Вау, да, это именно то, что мне нужно, но не могли бы вы немного объяснить мне, как вы этого добиваетесь?

Ответ №2:

Следующая строка будет выглядеть так, если я правильно интерпретирую ваше описание.

    <div class="row">
     <div class="col-sm-5" style="margin-right:10px;></div>
     <div class="col-sm-5></div>
   </div>

1. С помощью этого кода разделы не выровнены в первой строке, у нас есть 3 раздела, один из которых состоит из 3 столбцов, затем 3 * 3 = 9 столбцов, теперь первый имеет смещение на один 9 1 = 10, а поля равны двум по 10 пикселей, короче говоря, для первой строки мыимеет 10 столбцов и 20 пикселей. Теперь вторая строка должна быть того же размера, чтобы можно было выровнять края, но я не знаю, как разделить эти 10 столбцов размером 20 пикселей на две секции и 10 пикселей